9 replies

Weird onMouseEnter behavior

Here's an abstraction of the React I have:

h4.name
{isNameHovered && div.message}

h4.name
{isNameHovered && div.message}

The

h4

h4

has an

onMouseEnter

onMouseEnter

and

onMouseLeave

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