Css指针事件悬停问题

我必须输入以下代码：

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

---

问题是，当您滚动文本时，在firefox和ie中，overPlaylistItem和outPlaylistItem会不断被调用，而光标会一直闪烁。这在chrome中正常工作。有没有一种方法可以在所有浏览器中使用此功能？

为什么没有使用

：hover

？这可以通过CSS轻松完成，并且不会对浏览器的兼容性造成任何困难，例如

。播放列表项{
位置：相对位置；
顶部：0px；
左：0px；
高度：40px；
边缘底部：5px；
溢出：隐藏；
线高：40px；
}
.播放列表标题{
显示：块；
位置：相对位置；
顶部：0px；
左边距：20px；
溢出：隐藏；
字体大小：22px；
字体系列：“Gnuolane Free”；
边缘底部：0px；
背面可见性：隐藏
}
.未选择播放列表：悬停{
颜色：红色；
指针事件：无；
背面可见性：隐藏
}
.未选择播放列表{
颜色：#bbb；
}

---

发生这种情况的原因是，当您设置具有

指针事件的类时：none

会触发鼠标离开事件，因此它会闪烁

首先，我建议您使用

：hover

，其次，无论您使用

：hover

还是脚本，您都需要针对不应单击的特定元素，例如

span

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

堆栈片段

。播放列表项{
位置：相对位置；
顶部：0px；
左：0px；
高度：40px；
边缘底部：5px；
溢出：隐藏；
线高：40px；
}
.播放列表标题{
显示：内联块；
位置：相对位置；
顶部：0px；
左边距：20px；
溢出：隐藏；
字体大小：22px；
字体系列：“Gnuolane Free”；
边缘底部：0px；
}
.未选择播放列表{
颜色：#bbb；
}
.未选择播放列表：悬停{
颜色：红色；
}
.未选择播放列表：悬停范围{
指针事件：无；
}

删除

指针事件：无

。我不明白它为什么会出现？我知道这会导致问题，但我需要它，因为当单击播放列表项（并在单击时获取播放列表选定的类）时，我会在其中添加一些内容，我不想再被单击（直到它获取播放列表未选定的类）。然后你需要添加“一些内容”同样，我们有完整的图片，否则我们的建议可能会失败。我不想更改javascript，我想知道这是css的一种怪癖。我用您的脚本更新了我的答案。@LGSon您是说：hover在FF中不起作用。我不敢相信。等一段时间。。。我将发布一个屏幕快照不，我是说它的工作原理与OP已经使用脚本发布的内容没有任何不同，因此当悬停在FF中时，文本开始闪烁我在FF中测试了您的更新，并且文本/颜色仍然闪烁。你不也看到了吗？我需要javascript来实现鼠标的进入/离开，因为还有其他操作，但是添加了指针事件：无；span确实解决了问题。@Toniq不知道它在Edge中不起作用。。。稍后将查看并让您知道。@Toniq Update my answer，当跨度显示为块时，似乎是Edge中的某种缺陷，因此将其更改为

display:inline block

，它就可以工作了。。。IE11需要

显示：内联
@LGSon谢谢。它适用于我，但与
：active
事件不
：hover