1
我有這個問題，下面的代碼，我做使這個代碼，其中「格」從右擴展到左懸停，我需要擴張回來當鼠標離開底部區域（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;}
\t
/* --- 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>
但它返回到原來的狀態......你有這個問題，當您運行從你的問題的片段？ –
如果你把鼠標放到展開區域，圖標懸停關閉（fb，tw，gpt ecc） – Alex
我認爲你想在轉換中加入一個延遲，以便當你將鼠標從圖標上移開時它會持續...am我對嗎？ –