1
Ich habe dieses Problem mit dem Code unten, habe ich diesen Code gemacht, wo "div" von rechts nach links auf Hover erweitert, ich brauche diese Erweiterung zurückkommen, wenn die Maus aus dem unteren Bereich (48x48px ...)Teilen Tasten Ausgabe
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>
Aber es in den ursprünglichen Zustand zurückkehrt, zurück ... Haben Sie dieses Problem, wenn Sie den Code-Schnipsel aus Ihrer Frage laufen? –
Wenn Sie die Maus auf den Expantion-Abschnitt setzen, wird das Symbol schweben ausgeschaltet (fb, tw, gpt ecc) – Alex
Ich denke, Sie möchten eine Verzögerung in den Übergang hinzufügen, so dass es dauert, wenn Sie die Maus aus dem Symbol .. am ich richtig? –