Как убрать подергивание элемента при наведении?

Question

[rinatoptimus]

jsfiddle.net/rinatoptimus/ujx8yumh - при наведении красный текст и картинка мэйлру всплывают, но если поводить курсор по красному тексту, он начинает подергиваться. Как это можно исправить?

Answer 1

[petyagrill]

если быстро хочется решить проблему то добавьте в css

.grayscale+p {
      pointer-events:none;
  }

Comments

[rinatoptimus]

Спасибо! pointer-events - не знал про это.

[petyagrill]

rinatoptimus: jsfiddle.net/ujx8yumh/2 это избавит от js и сохранит анимацию в момент когда убирается курсор

[rinatoptimus]

petyagrill: Вот это здорово! Спасибо!

Answer 2

[Wol_fi]

У вас блоки alpha_wrapper и p - соседские. А дёргает - потому, что когда p подъезжает, alpha_wrapper теряет hoverIn , а когда начинает срабатывать hoverOut и p уезжает вниз, он опять ловит hoverIn, отсюда и скачет туда-сюда. Поменяйте разметку так, чтоб блок, которому вы назначаете hover не терял его во время анимации.

Comments

[rinatoptimus]

Это да, почему так происходит понятно, но никак не соображу, как сделать так, чтоб не перехватывался hover, пробовал местами менять, но тут ведь надо, чтоб фильтр grayscale не влиял в итоге на текст, текст должен оставаться цветным.