1

以下のコードでこの問題が発生しました。ホバー時に「div」が右から左に展開するこのコードを作成しました。マウスが下部領域 (48x48px) から外れると、その展開が元に戻る必要があります…</p> 

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>

4

1 に答える 1

0

スニペットの冒頭に不完全な CSS コードがありますが、これは省略します。

問題が正しければ、マウスを左側の強調表示された領域に移動しても、FB、TW などの灰色の領域が強調表示されないという問題があります。これは、この div を右側に移動していないためです。

必要なのは、左側の div にカーソルを合わせたときのセレクターを追加することです。右側も強調表示する必要があります。したがって、たとえば、セレクター.fb:hoverをに変更する必要があります.fb:hover, .share-botton-fb:hover .fb。

また、CSS のインデントを修正し、欠落していた終了 div を HTML に追加しました。

スニペットに div が表示されないため、コメントアウトする必要がありましposition: absolute;た。.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 --- */
<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>

于 2016-10-22T17:00:03.777 に答える