百度左右图片按钮的样式

最新推荐文章于 2020-11-16 11:11:20 发布

weixin_30376163

最新推荐文章于 2020-11-16 11:11:20 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/llcdbk/p/4950220.html

版权

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>

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

转载于:https://www.cnblogs.com/llcdbk/p/4950220.html

weixin_30376163

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度左右图片按钮的样式

CSS:body {}.bg1:hover { background: #d5e0f3;}.bg2:hover { background: #d5e0f3;}.bg1 { top: -3px; position: absolute; left: 0; width: 70px; outl...
复制链接

扫一扫