您的位置:首页 > Web前端 > CSS

百度左右图片按钮的样式

2015-11-09 16:04 501 查看
CSS:

body {
}

.bg1:hover {
background: #d5e0f3;
}

.bg2:hover {
background: #d5e0f3;
}

.bg1 {
top: -3px;
position: absolute;
left: 0;
width: 70px;
outline: 0;
cursor: pointer;
background: transparent;
height: 100%;
transition: background-color .2s ease-in;
}

.bg2 {
top: -3px;
position: absolute;
right: 0;
width: 70px;
outline: 0;
cursor: pointer;
background: transparent;
height: 100%;
transition: background-color .2s ease-in;
}

.bg1 .jt1 {
height: 72px;
margin: -85px 0 0 -18px;
width: 40px;
top: 50%;
left: 50%;
position: absolute;
background: url(../Images/slider_btn_icon_0624374.png) no-repeat 0 0;
background-position: 0 -87px;
margin-left: -26px;
}

.bg2 .jt2 {
height: 72px;
margin: -85px 0 0 -18px;
width: 40px;
top: 50%;
left: 50%;
position: absolute;
background: url(../Images/slider_btn_icon_0624374.png) no-repeat 0 0;
background-position: 2 6px;
}

.bg1:hover .jt1 {
background-position: -46px -86px;
}

.bg2:hover .jt2 {
background-position: -46px 0;
}

.center {
position: relative;
margin: 3px 70px;
overflow: hidden;
height: 100%;
vertical-align: baseline;
}

.container {
height: 100%;
position: relative;
}


HTML:

<Body>
<div class="container">
<span class="bg1">
<span id="btnPrev" class="jt1" onclick="selectProvNode()"></span>
</span>
<div class="center" >
<!--内容-->
</div>
<span class="bg2">
<span id="btnNext" class="jt2" onclick="selectNextNode()"></span>
</span>
</div>
</Body>


经过本人加工现已可以使用,希望对大家有帮助
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: