11

There seems to be a bug regarding the hover class in the Duplicate modal:

enter image description here

Full resolution GIF: https://i.ibb.co/Qcx7zjg/unnamed.gif


As commented by @VLAZ, it seems to be related to the following code found in full.en.js:

.on("mouseenter", function () { $(this).toggleClass('hover'); });

  • Tested on Chrome Version 124.0.6367.158 & Firefox 122.0
  • No browser plugins
6
  • 2
    Moving the mouse over adds the class "hover" (not pseudo-class). Moving the mouse away doesn't remove it, only hovering again does.
    – VLAZ
    Commented May 23 at 13:40
  • 6
    Found it: .on("mouseenter", function () { $(this).toggleClass('hover'); }); in full.en.js. Only toggles the class (adds/removes) when the mouse enters any of the items.
    – VLAZ
    Commented May 23 at 13:51
  • 3
    hires @VLAZ to SE so the bug can be fixed faster Commented May 23 at 14:03
  • 7
    @VLAZ how cool would it be if CSS had something like pseudo classes that would allow you to apply styling on certain common state changes of an element.
    – rene
    Commented May 23 at 14:09
  • @rene I don't think such technology is achievable. For at least the next 6-8 years.
    – VLAZ
    Commented May 23 at 14:13
  • 1
    @VLAZ well SE is using the opposite of KIS, which is MIC: Make It Complicated. Whenever possible, adding JS and "modern" code to make the code ubber awesome. But full of bugs. Commented Jun 6 at 11:51

1 Answer 1

3

I created a userstyle to fix this annoying behaviour. See it on Stack Apps.

Relevant part posted here:


Showcase of background changing on hover and reverting after the mouse is moved away.

Installation

Prerequisites to install a userstyle

You need a userstyle manager like Stylus:

Installing the userstyle

Direct install (GitHub)

See the code on GitHub

Code


/* ==UserStyle==
@name         Stack Exchange - fix annoying sticky duplicate window hover
@description  Fix for https://meta.stackexchange.com/questions/400179/duplicate-modal-row-hover-state-not-cleared - hovering adds a sticky background remvoed on a second hover
@namespace    https://github.com/PurpleMagick/
@version      1
@author       VLAZ
@license      MIT
==/UserStyle== */

@-moz-document domain("stackoverflow.com"), domain("superuser.com"), domain("serverfault.com"), domain("askubuntu.com"), domain("stackapps.com"), domain("mathoverflow.net"), domain("stackexchange.com") {

/* remove the background-color alteration for the class */
.close-as-duplicate-pane .original-display .list-originals .list .item.hover {
    background-color: unset;
}

/* attach the background-color to the :hover pseudo-class and let the browser handle it */
.close-as-duplicate-pane .original-display .list-originals .list .item:hover,
.close-as-duplicate-pane .original-display .list-originals .list .item.hover:hover {
    background-color: var(--black-200);
}

}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .