滚动后保持悬停状态答案

【问题标题】：Hover state remains after scrolling滚动后保持悬停状态
【发布时间】：2021-11-15 08:45:13
【问题描述】：

我在浏览器上有一个奇怪的行为。

从下面的例子试试这个：

将光标移动到矩形区域。矩形将变为红色
不要移动鼠标而只是向下滚动直到光标离开屏幕。
观察。

矩形仍然是红色的。有谁知道如何解决这个问题？

.container {
  border: 1px solid black;
  height: 2000px;
}

.rect {
  border: 1px solid;
  height: 200px;
  width: 200px;
}

.rect:hover {
  background-color: red;
}

<div class="container">
  <div class="rect" onmouseleave="console.log('mouseleave');">
  </div>
</div>

【问题讨论】：

这可能是因为悬停是当鼠标移动并且滚动鼠标处于稳定状态时
这里的行为正常吗？从您的 sn-p 在 Firefox 上。但要明确一点：“直到光标离开屏幕”是什么意思？
在 Firefox 上好像不会发生，但在 Chrome 上会发生

标签： html css hover

【解决方案1】：

这似乎是一种故意行为。 https://groups.google.com/a/chromium.org/g/blink-dev/c/KIoVljZw5fc/m/EKGAoTeX8CQJ?pli=1

这里的问题是鼠标实际上并没有离开，只是页面在滚动，鼠标指针停留在同一位置。

这种行为权衡主要是出于性能原因。

【讨论】：