分享按钮问题

Question

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

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 --- */

<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>

Answer 1

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

如果我没看错你的问题，问题是当你把鼠标移到左边的高亮区域时，FB、TW等的灰色区域没有高亮显示。那是因为您不再将此 div 悬停在右侧。

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

我还修复了 CSS 缩进并在 HTML.

中添加了一个缺失的结尾 div

我不得不注释掉 .share 的 position: absolute;，因为这样您就不会在代码段中看到 div。但在您的网站上，您可能需要取消注释。

代码如下：

/* --- 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 --- */

<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>

分享按钮问题

Share buttons issue

css

css-transitions

share-button