百度左右图片按钮的样式

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>

经过本人加工现已可以使用，希望对大家有帮助

posted @ 2015-11-09 16:04  洛晨随风  阅读(294)  评论(0)  编辑  收藏  举报