我在下面的代码中遇到了这个问题，我制作了这个代码，其中"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>代码段开头有一些不完整的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>