0

I have a react component with a div with a class name

<span className="myClass" ..

I have a CSS style like this

.myClass{
    text-decoration:underline;
}

If I go into dev tools and force the state to hover the text is decorated as underline( Inspect hovered element in Chrome?) However, if I just mouse over the span the text decoration is not applied.

It seems something is blocking the hover state from being applied. Something also seems to be interfering with onMouseOut events for the parent div so I think something is messing up normal mouse events. I am using a few libraries so it seems like something is somehow blocking normal mouse events.

What steps can I take to debug this?

bernie2436
  • 22,841
  • 49
  • 151
  • 244
  • 2
    where is `:hover`, more code please?? – ezio4df Jul 05 '20 at 14:43
  • @aXuser264 what code is most helpful? trying to show a minimal example – bernie2436 Jul 05 '20 at 14:46
  • Can you please show a fully reproducible example in a sandbox? [codesandbox](https://codesandbox.io/s/vanilla-react-template-irhcq) – Dennis Vash Jul 05 '20 at 15:00
  • Somebody commented to use chrome dev tools to see Event Listeners (and then deleted the comment it seems). That was super helpful and allowed me to find the issue. Can you add as an answer? I will accept. – bernie2436 Jul 05 '20 at 15:12

0 Answers0