时间戳

首页 > 解决方案 > 滚动后保持悬停状态

html - 滚动后保持悬停状态

问题描述

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

从下面的例子试试这个：

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

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

.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>

标签： htmlcsshover

解决方案

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

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

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

推荐阅读