How to remove twitching of an element on hover?

Question

css

jsfiddle.net/rinatoptimus/ujx8yumh - red text and mailbox image pop up on hover, but hovering over red text makes it twitchy. How can this be fixed?

Answer 1

if you want to quickly solve the problem then add to css

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

Answer 2

You have blocks alpha_wrapper and p - neighbors. And it jerks - because when p approaches, alpha_wrapper loses hoverIn , and when hoverOut starts to work and p goes down, it catches hoverIn again, from here it jumps back and forth. Change the markup so that the block you assign hover to doesn't lose it during the animation.