Question

我在下面的代码中遇到了这个问题，我制作了这个代码，其中＆＃34; div＆＃34;在悬停时从右向左扩展，当鼠标离开底部区域时，我需要扩展回来（48x48px）......

＆＃13;

height: 800px;
    margin: 20px auto 20px auto;
    border: 1px solid #ebebeb;
    box-shadow: 2px 2px 4px #ebebeb;
    position: relative;
}


/* --- Shere buttons --- */

.share {
    position: absolute;
    top: 270px;
    right: 970px;
    width:161px;
    height:auto;
}

.top-share {
    width: 145px;
    border-left: solid 1px #ebebeb;
    border-top: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    margin: 0px;
    background: #f7f7f7;
    padding-left: 15px;
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 46px;
}

.top-share span {
    background: url(img/share-img.png) no-repeat #f7f7f7;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    left: 4px;
    vertical-align: middle;
}
a {display: block;}

.share-botton-fb, .share-botton-tw, .share-botton-gp, .share-botton-inst, .share-botton-pin {
    width: 48px;
    height: 48px;
    background: #ebebeb no-repeat;
    position: relative;
    left: 113px;
    display: block;
    -webkit-transition: width .3s, left .3s;
}

.fb {
    width: 48px; height:48px;
    position: relative;
    background: url(img/facebook.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.fb:hover {background-image: url(img/facebook-hover.png); background-color: #3b5998; }
.share-botton-fb:hover { background: url(img/fb-text.png) center #3b5998 no-repeat; width: 161px; left: 0;}

.tw {
    width: 48px;
    height: 48px;
    position: relative;
    right: 0px;
    background: url(img/twitter.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.tw:hover {background-image: url(img/twitter-hover.png); background-color: #2ba9e1;}
.share-botton-tw:hover { background: url(img/tw-text.png) center #2ba9e1 no-repeat; width: 161px; left: 0;}

.gp {
    width: 48px;
    height: 48px;
    position: relative;
    background: url(img/google-plus.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all  .3s;
}
.gp:hover {background-image: url(img/google-plus-hover.png); background-color: #dd4b39;}
.share-botton-gp:hover { background: url(img/gp-text.png) center #dd4b39 no-repeat; width: 161px; left: 0;}

.inst {
    width: 48px;
    height: 48px;
    position: relative;
    background: url(img/instagram.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.inst:hover {background-image: url(img/instagram-hover.png); background-color: #517fa4;}
.share-botton-inst:hover { background: url(img/inst-text.png) center #517fa4 no-repeat; width:161px; left:0;}

.pin {
    width: 48px; height: 48px;
    position: relative;
    background: url(img/pinterest.png) no-repeat center #ebebeb;
    display: block;
    float: right;
    -webkit-transition: all .3s;
}
.pin:hover {background-image: url(img/pinterest-hover.png); background-color: #d73532;}
.share-botton-pin:hover { background: url(img/pin-text.png) center #d73532 no-repeat; width: 161px; left: 0;}
	
/* --- Share buttons END --- */

＆＃13;

<div id="main">
    <div class="share">
        <div class="top-share">icons below <span></span></div>
        <div class="share-botton-fb"><a href="#"><div class="fb">FB</div></a></div>
        <div class="share-botton-tw"><a href="#"><div class="tw">TW</div></a></div>
        <div class="share-botton-gp"><a href="#"><div class="gp">GP</div></a></div>
        <div class="share-botton-inst"><a href="#"><div class="inst">INST</div></a></div>
        <div class="share-botton-pin"><a href="#"><div class="pin">PIN</div></a></div>
    </div>
</div>

＆＃13;

Answer 1

在您的代码段的开头有一些不完整的CSS代码，我将省略。

如果我的问题正确，问题是当您将鼠标移动到左侧突出显示的区域时，FB，TW等灰色区域不会突出显示。那是因为你不再在右边徘徊这个div了。

您需要的是在左侧div上悬停时添加选择器，右侧也应突出显示。因此，例如，您需要将选择器.fb:hover更改为.fb:hover, .share-botton-fb:hover .fb。

我还修复了CSS缩进，并在HTML中添加了一个缺少的结束div。

我必须对position: absolute;的{{1}}发表评论，因为那时您不会在代码段中看到div。但是在您的网站上，您可能需要取消注释。

以下是代码：

.share

/* --- Shere buttons --- */

.share {
    /*position: absolute;*/
    top: 270px;
    right: 970px;
    width:161px;
    height:auto;
}

.top-share{
    width: 145px;
    border-left: solid 1px #ebebeb;
    border-top: solid 1px #ebebeb;
    border-bottom: solid 1px #ebebeb;
    margin: 0px;
    background: #f7f7f7;
    padding-left: 15px;
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 46px;
}

.top-share span {
    background: url(img/share-img.png) no-repeat  #f7f7f7;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
    left: 4px;
    vertical-align: middle;
}
a {display:block;}

.share-botton-fb, .share-botton-tw, .share-botton-gp, .share-botton-inst, .share-botton-pin {
    width:48px;
    height:48px;
    background:#ebebeb no-repeat;
    position:relative;
    left:113px;
    display:block;
    -webkit-transition: width .3s, left .3s;
}


.fb {
    width:48px; height:48px;
    position:relative;
    background:url(img/facebook.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all .3s;
}
.fb:hover, .share-botton-fb:hover .fb {background-image:url(img/facebook-hover.png); background-color:#3b5998; }
.share-botton-fb:hover { background: url(img/fb-text.png) center #3b5998 no-repeat; width:161px; left:0;}


.tw {
    width:48px; height:48px;
    position:relative;
    right:0px;
    background:url(img/twitter.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all .3s;
}
.tw:hover, .share-botton-tw:hover .tw {background-image:url(img/twitter-hover.png); background-color:#2ba9e1;}
.share-botton-tw:hover { background: url(img/tw-text.png) center #2ba9e1 no-repeat; width:161px; left:0;}


.gp {
    width:48px; height:48px;
    position:relative;
    background:url(img/google-plus.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all  .3s;
}
.gp:hover, .share-botton-gp:hover .gp {background-image:url(img/google-plus-hover.png); background-color:#dd4b39;}
.share-botton-gp:hover { background: url(img/gp-text.png) center #dd4b39 no-repeat; width:161px; left:0;}

.inst {
    width:48px; height:48px;
    position:relative;
    background:url(img/instagram.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all  .3s;
}
.inst:hover, .share-botton-inst:hover .inst {background-image:url(img/instagram-hover.png); background-color:#517fa4;}
.share-botton-inst:hover { background: url(img/inst-text.png) center #517fa4 no-repeat; width:161px; left:0;}

.pin {
    width:48px; height:48px;
    position:relative;
    background:url(img/pinterest.png) no-repeat center #ebebeb;
    display:block;
    float:right;
    -webkit-transition: all  .3s;
}
.pin:hover, .share-botton-pin:hover .pin {background-image:url(img/pinterest-hover.png); background-color:#d73532;}
.share-botton-pin:hover { background: url(img/pin-text.png) center #d73532 no-repeat; width:161px; left:0;}
    
/* --- Share buttons END --- */

分享按钮问题

1 个答案: