Small issue: the mouse out area from a button is smaller than the mouse in area

Steps:

  • Move your cursor on a button.
  • Move out a bit your cursor off the button, but no farther than the entire button.
  • The button’s hover state then disappears. If you move in again your cursor inside the button, the hover state won’t be displayed.

chrome_DC8p8WGM55

Note: the button still works, despite the hover state not being active. It’s just a visual thing that bugs me a bit.

2 Likes

This doesn’t seem to be an issue … I think it’s just the hover effect in css that disappears after a few seconds, it’s an animation. Just need to change the css

The effect doesn’t disappear if I keep the mouse cursor on the button.


image

If the cursor goes inside the green area, the button gets the d-hover class that highlights the entire button, as expected.

But as soon as the cursor leaves the red area (try putting the mouse cursor between “Reply” and the arrow next to it on the left :smile:), the entire button loses its d-hover class. It shouldn’t. The d-hover class should disappear only when the cursor leaves the green area (or if the button isn’t focused anymore).

4 Likes

Quick question: if I wanted to try to debug this, should I look at

or do you think the issue comes from another script?

Hello,

I think this is something you can change with CSS. From the JS it seems to it is target the button.widget-button and add .d-hover class on mouseenter. But when you move the cursor to the icon and back it goes from the targeted class and removed the .d-hover class. Or something like this :slightly_smiling_face:

Try something like this on Desktop / CSS

nav.post-controls {
  .actions button {
    .d-icon,
    .d-button-label {
      pointer-events: none;
    }
  }
}

Sep-02-2022 09-07-02

1 Like

This is both hacky and smarty :smile:
I hope it won’t interfere with Discourse’s interface more than expected.

I’d like to understand the underlying reason for this behavior, which occurs on any button, not only the post controls.

1 Like

Replacing “mouseenter” by “mouseover” here:

Resolves the issue, but I’m not sure if it has unwanted consequences or not.
I didn’t encounter any problem at first glimpse.

I suppose I’ll let the devs see if it’s a proper fix ot nor.