Javascript/css/html - prevent mousedown from disabling hover

Question

It seems that in browser-javascript hover events are disabled when the mouse is held down, as the following example illustrates: (No need to review the code, just run the example to see what I'm talking about.)

* { user-select: none; }
#click, #drag, #hover {
  position: absolute;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #ffffff;
  cursor: default;
}
#click {
  width: 150px; height: 150px; line-height: 150px;
  left: 10px; top: 50%; margin-top: -75px;
  background-color: #d00000;
}
#drag {
  width: 220px; height: 50px; line-height: 50px;
  left: 160px; top: 50%; margin-top: -25px;
  background-color: #900000;
}
#hover {
  width: 200px; height: 200px; line-height: 200px;
  left: 380px; top: 50%; margin-top: -100px;
  background-color: #000000;
  white-space: nowrap;
}
#hover:after {
  content: "This element has hover effects";
  position: absolute;
  display: inline-block;
  color: #909090;
  left: 5px; top: -80px;
  font-size: 11px;
}
#hover:hover {
  background-color: #ffffff;
  color: #000000;
}

<div id="click">
  Click down here
</div>
<div id="drag">
  --> Now drag over this way -->
</div>
<div id="hover">
  No hover occurs
</div>

Note that the moment the mouse button is released, hover events occur normally on the right-most div.

How can I allow hover events to occur on any element while the mouse is being held down? Looking for solutions in css, pure javascript, or html.

When I click on the red rectangle and move my mouse I select text, moving to the right I continue selecting and when I get in the black rect it becomes white, so hover works here. - Firefox DevEdition 54.0a2 (2017-04-18), openSUSE Leap 42.2 64-bit. — Todor Simeonov, May 26 '17 at 15:57
@TodorSimeonov that's interesting, and seems like a better implementation than what I'm using (Chrome 58.0.3029.110 64-bit). — Gershom Maes, May 26 '17 at 15:59

score 1 · Accepted Answer · answered May 26 '17 at 15:57

There isn't really a pure CSS way to solve this, simply because that's how it works. Not much way to override that stuff with CSS.

What you'll have to do instead is manually implement your own hover functionality by using mouseenter and/or mouseover and mouseout and/or mouseleave.

Something like this:

const myElement = document.querySelector('#myElement');

myElement.addEventListener('mouseenter', ({ target }) => target.classList.add('hovering'));
myElement.addEventListener('mouseleave', ({ target }) => target.classList.remove('hovering'));

div {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background: #F00;
}

div.hovering {
  background: #0F0;
}

<div id="myElement"></div>

Javascript/css/html - prevent mousedown from disabling hover

1 Answers1