Проблема с кнопками общего доступа

ProgramBox

Проблема с кнопками общего доступа

Post author:admin
Запись опубликована:7 мая, 2023
Post category:Вопросы по программированию

#css #css-transitions #share-button

#css #css-переходы #кнопка общего доступа

Вопрос:

У меня эта проблема с приведенным ниже кодом, я создал этот код, в котором «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>

1. Но это возвращает обратно в исходное состояние… Возникает ли у вас эта проблема при запуске фрагмента из вашего вопроса?

2. при наведении курсора мыши на раздел расширения курсор на значок отключается (fb, tw, gpt ecc)

3. Я думаю, вы хотите добавить задержку при переходе, чтобы она продолжалась, когда вы убираете мышь с icon..am я прав?

4. мой английский не очень хорош, но я попытаюсь объяснить: когда вы наводите курсор мыши на боттон (FB), он расширяется влево и все в порядке. Но когда вы наводите курсор мыши на область расширения, наведение курсора на боттон отключается, но он остается в области расширения

Ответ №1:

В начале вашего фрагмента есть некоторый неполный CSS-код, который я собираюсь опустить.

Если я правильно понял вашу проблему, проблема в том, что серая область с FB, TW и так Далее Не подсвечивается при наведении курсора мыши на выделенную область слева. Это потому, что вы больше не наводите указатель мыши на этот div справа.

Что вам нужно, так это добавить селектор для того, чтобы при наведении курсора на левую часть div также выделялась правая сторона. Так, например, вам нужно изменить селектор .fb:hover на .fb:hover, .share-botton-fb:hover .fb .

Я также исправил отступ CSS и добавил отсутствующий закрывающий div в HTML.

Мне пришлось закомментировать position: absolute; из .share , потому что тогда вы не увидели бы 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>