Safari浏览器中，拖动元素时无法触发CSS hover事件

Question

似乎Safari在使用CSS注册hover事件时存在问题。如果您运行下面的片段并将光标从蓝色拖到绿色，则应发生两件事情。在所有浏览器上，绿色div在悬停时会变成红色。在非Safari浏览器（火狐和谷歌，均为最新版本）中，从蓝色拖到绿色时，当光标进入时，绿色div将变为红色。但在Safari（也是最新版本）中，从蓝色div拖动光标到绿色div时，绿色div不会变为红色。看起来它无法识别鼠标已经按下时的悬停状态。我尝试了许多不同的变化和其他解决方案，但它们都无效（设置其他CSS属性以使其重新绘制等）。有人能解释这种奇怪的行为以及如何解决/修复它吗？

div {
  position: fixed;
  color: white;
  -webkit-user-select: none;
  user-select: none;
}
div.blue {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
}
div.green {
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: green;
}
.green:hover {
  background-color: red !important;
}

<div class="blue">CLICK HERE</div>
<div class="green">AND DRAG HERE</div>

- Gregory Ling

---

很不幸，目前似乎没有办法绕过它，至少我在测试中没有找到。 - Kwright02

Answer 1

经过更多的搜索，我发现我需要使用javascript鼠标进入和离开事件来改变颜色。Safari的悬停似乎是故意不识别拖动操作作为悬停。

document.getElementsByTagName('div')[1].onmouseenter = () => {
  document.getElementsByTagName('div')[1].classList.add('hover')
}

document.getElementsByTagName('div')[1].onmouseleave = () => {
  document.getElementsByTagName('div')[1].classList.remove('hover')
}

div {
  position: fixed;
  color: white;
  -webkit-user-select: none;
  user-select: none;
}
div.blue {
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: blue;
}
div.green {
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-color: green;
}
.green:hover, .green.hover {
  background-color: red !important;
}

<div class="blue">CLICK HERE</div>
<div class="green">AND DRAG HERE</div>

- Gregory Ling