时间戳

首页 > 解决方案 > 拖动时未触发仅 Safari 的 CSS 悬停事件

css - 拖动时未触发仅 Safari 的 CSS 悬停事件

问题描述

Safari 使用 css 注册悬停事件似乎有问题。如果你运行下面的代码片段并将光标从蓝色拖到绿色，应该会发生两件事。在所有浏览器上，绿色 div 将在悬停时变为红色。在非 Safari 浏览器（firefox 和 chrome，都是最新的）上，当从蓝色拖动到绿色时，绿色的 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>

标签： csssafarihovermousedownonmousedown

解决方案

经过更多搜索后，我发现我必须使用 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>

推荐阅读