Weird onMouseEnter behavior
Here's an abstraction of the React I have:
The
h4 has an onMouseEnter and onMouseLeave event that sets the isNameHovered state which is responsible for rendering the message.
It does what it's supposed to do but for some reason the message opacity changes relative to position within the h4.
https://gyazo.com/bd8fad7560ee8d78f74edbdde4d80f59
This only happens if I try to enter the h4 from the bottom; the top is fine. I have no animation styles set on anything relating to this.Gyazo
Gyazo Screen Video
5 Replies
Hm, gyazo doesn't seem to be capturing the opacity changes
But either way, it's flickering too much as well
It's perfectly fine when from top
That sort of flickering normally happens when a different element is covering part of the element with the hover.
In this case it is probably the message element itself. However, without seeing some code ,it is very hard to tell.
I think that might just be it.
I haven't properly positioned the message.
I'll try changing its position and get back to you.
Thanks, you were right. I set z-index to check and it doesn't flicker as much now