Javascript / css / html - 防止mousedown禁用悬停[重复]答案

【问题标题】：Javascript/css/html - prevent mousedown from disabling hover [duplicate]Javascript / css / html - 防止mousedown禁用悬停[重复]
【发布时间】：2017-05-26 15:49:20
【问题描述】：

似乎在按住鼠标时禁用了浏览器-javascript 悬停事件，如下例所示：（无需查看代码，只需运行示例即可查看我在说什么。）

* { 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>

请注意，在释放鼠标按钮的那一刻，悬停事件通常发生在最右侧的div。

如何在按住鼠标时允许任何元素上发生悬停事件？正在寻找 css、纯 javascript 或 html 中的解决方案。

【问题讨论】：

当我点击红色矩形并移动鼠标时，我选择了文本，向右移动我继续选择，当我进入黑色矩形时，它变成白色，所以悬停在这里有效。 - Firefox DevEdition 54.0a2 (2017-04-18)，openSUSE Leap 42.2 64 位。
@TodorSimeonov 这很有趣，而且似乎比我使用的更好（Chrome 58.0.3029.110 64 位）。

标签： javascript html css hover

【解决方案1】：

没有真正的纯 CSS 方法来解决这个问题，仅仅是因为它就是这样工作的。用 CSS 覆盖这些东西的方法并不多。

您需要做的是使用mouseenter 和/或mouseover 和mouseout 和/或mouseleave 手动实现自己的悬停功能。

类似这样的：

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;
}

&lt;div id="myElement"&gt;&lt;/div&gt;

【讨论】：