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

Contribute UX

AI-generated summary

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

A user, Canapin, reported a visual issue where the hover state of a button disappears when the cursor is moved out of the button but still within the entire button area. The button still functions, but the hover effect is lost.

Canapin discovered that the issue occurs because the d-hover class is removed when the cursor leaves the inner area of the button (red area), rather than the entire button area (green area).

Don suggested a CSS solution, adding pointer-events: none to the .d-icon and .d-button-label classes, which resolves the issue. However, Canapin expressed concerns about potential interference with the Discourse interface.

Canapin also found an alternative solution by replacing “mouseenter” with “mouseover” in the Discourse code, which resolves the issue without introducing any immediate problems. However, they are waiting for further review from the developers to confirm whether this is a proper fix.

1

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
2

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

3

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
4

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

or do you think the issue comes from another script?

5

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
6

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
7

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.