Css 指针事件悬停问题

Question

我必须遵循以下代码：

<div class="playlist-item">
  <a class="playlist-non-selected" href="#">
    <span class="playlist-title">AudioAgent - Japanese Intro</span>
  </a>
</div>

https://jsfiddle.net/4uyb7rh9/10/

问题是当您滚动文本时，在 firefox 中，即不断调用 overPlaylistItem 和 outPlaylistItem，并且光标一直在闪烁。这在 chrome 中正常工作。有没有办法让它在所有浏览器中工作？

Answer 1

你为什么没用过:hover？这可以通过 CSS 轻松完成，并且不会像

那样对浏览器兼容性造成任何困难

.playlist-item {
  position: relative;
  top: 0px;
  left: 0px;
  height: 40px;
  margin-bottom: 5px;
  overflow: hidden;
  line-height: 40px;
}

.playlist-title {
  display: block;
  position: relative;
  top: 0px;
  margin-left: 20px;
  overflow: hidden;
  font-size: 22px;
  font-family: 'Gnuolane Free';
  margin-bottom: 0px;
  backface-visibility:hidden
}

.playlist-non-selected:hover{
  color: red;
  pointer-events: none;
  backface-visibility:hidden
}

.playlist-non-selected {
  color: #bbb;
}

<div class="playlist-item">
  <a class="playlist-non-selected" href="#">
    <span class="playlist-title">AudioAgent - Japanese Intro</span>
  </a>
</div>

Answer 2

发生这种情况是因为当您将 class 设置为 pointer-events: none 时，它会触发鼠标离开事件，因此它会闪烁。

首先，我建议您使用:hover，其次，无论您使用:hover还是脚本，您都需要针对不应点击的特定元素，例如span

.playlist-non-selected:hover span {
  pointer-events: none;
}

堆栈片段

.playlist-item {
  position: relative;
  top: 0px;
  left: 0px;
  height: 40px;
  margin-bottom: 5px;
  overflow: hidden;
  line-height: 40px;
}
.playlist-title {
  display: inline-block;
  position: relative;
  top: 0px;
  margin-left: 20px;
  overflow: hidden;
  font-size: 22px;
  font-family: 'Gnuolane Free';
  margin-bottom: 0px;
}
.playlist-non-selected {
  color: #bbb;
}
.playlist-non-selected:hover{
  color: red;
}
.playlist-non-selected:hover span{
  pointer-events: none;
}

<div class="playlist-item">
  <a class="playlist-non-selected" href="#">
    <span class="playlist-title">AudioAgent - Japanese Intro</span>
  </a>
</div>

这里是an updated fiddle使用你的脚本

根据关于无法在 Edge 中工作的评论进行更新

当 span 具有 display: block 时，似乎是 Edge 中的某种错误，因此将其更改为 display: inline-block 并且有效。

要使其在 IE11 中工作，span 需要 display: inline（或仅删除 display:...），因此它使用其默认值。

根据关于无法在 Edge 中工作的评论更新 2

如果您需要 span 显示为块，将其更改为 div 它在 Edge 和 IE11 中都有效。

An updated fiddle 使用您的脚本

Css 指针事件悬停问题

Css pointer-events hover issue

css

hover