Блог

Главная - Вопросы по программированию - Как исправить дрожание / дрожание эффекта css при наведении?

Как исправить дрожание / дрожание эффекта css при наведении?

#html #css

#HTML #css

Вопрос:

Я создал эффект наведения на своем веб-сайте, который ссылается на изображение, которое является исходным изображением с непрозрачностью 65%. Проблема в том, что это происходит только один раз, только при первом наведении курсора все немного дрожит / дрожит, но затем все начинает работать нормально. Возможно, чего-то не хватает в моем коде наведения? Вы видите, что не так?

Спасибо за помощь 🙂

Код css, который я использую:

 #rebface
{

content:url("http://static.tumblr.com/g1c47pc/Td2n783c4/nface.png");  
position:relative;    
left:8%;
margin-left:20px;
    display:block;
    box-sizing: border-box;
}

#rebface:hover {
content:url("http://static.tumblr.com/g1c47pc/alcn783j0/nface_65.png"); 
transition: 0.5s linear;
position:relative;    

  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

HTML:

 <div style="margin-top:20px; display:flex;">    

        <a target="_blank" href="http://www.facebook.com/sharer.php?u={Permalink}"><div id="rebface"></div></a>

</div>

Вы можете увидеть это здесь: (Этот веб-сайт работает только в Chrome / Safari на данный момент)

http://testedesignfranjas.tumblr.com/post/87336302788/blend-food-culture-magazine-concepcao-de

Комментарии:

1. Я не совсем уверен, что понимаю. Какой элемент «дрожит»?

2. Я проверил значок facebook на вашем сайте, и он работает нормально, используя Chrome версии 35.0.1916.153 m. Ну, я думаю, вы имеете в виду короткое время, необходимое для загрузки дополнительного фонового изображения. Я скоро опубликую ответ 😉

3. Если значки социальных сетей немного перемещаются при наведении, измените теги <a> в этом div на display: inline-block;

Ответ №1:

Вы меняете местами изображения в атрибуте содержимого CSS. Я совершенно уверен, что они не кэшируются при загрузке страницы, поэтому они загружаются при наведении курсора мыши, что вызывает короткое мерцание.

Вы можете просто избежать этого, используя opacity вместо другого изображения.

 .facebook
{
  content:url("http://static.tumblr.com/g1c47pc/jhDn7hp40/sitef_1.png");
  left:50px;
  z-index:2;  
  position:absolute; 
  top:110px;
  left:0px;
  z-index:50;
}

.facebook:hover {
  opacity: 0.6;
  -webkit-backface-visibility: hidden;
}

И в качестве дополнительного примечания — используйте background вместо добавления фонового изображения через content атрибут. Это работает для старых браузеров и является гораздо более эффективной практикой.

Ответ №2:

В вашем css у вас есть следующее:

 #rebtweet:hover{ some-styles }
#rebface:hover{ some-styles }
#rebtumb:hover{ some-styles }
#rebgplus:hover{ some-styles }

Каждый из них имеет один общий стиль: transition: 0.5s linear;

Попробуйте удалить этот стиль. Я не уверен, но это может решить вашу проблему с мерцанием.

Надеюсь, это поможет.

Метки: