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>
经过本人加工现已可以使用，希望对大家有帮助