It appears that in browser-javascript hover events are deactivated when the mouse button is pressed down, as demonstrated by the following example: (Please run the code snippet to witness what I am referring to.)
* { 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 here
</div>
<div id="drag">
--> Now drag this way -->
</div>
<div id="hover">
No hover effect
</div>When the mouse button is released, hover events resume functioning normally on the rightmost div.
Is there a way to enable hover events on any element even when the mouse button is held down? Seeking solutions using css, pure javascript, or html.