CSS指针事件悬停问题 [英] Css pointer-events hover issue

问题描述

我必须遵循以下代码:

<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中可以正常使用.有没有一种方法可以在所有浏览器中使之工作?

The problem is when you rollover the text, in firefox and ie overPlaylistItem & outPlaylistItem are constantly called and cursor just keeps flickering. This works properly in chrome. Is there a way to make this work in all browsers?

推荐答案

之所以会发生这种情况，是因为当您将类设置为具有pointer-events: none的类时，它将触发鼠标离开事件，因此会闪烁.

This happens because when you set the class having pointer-events: none it triggers a mouse leave event, hence it flashes.

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

First of all, may I suggest you use :hover, second, whether you use :hover or script, you need to target the specific element that shouldn't be clickable, for example the 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>

这是使用您的脚本更新的小提琴

基于有关无法在Edge中运行的注释的更新

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

Appears to be some kind of bug in Edge when the span has display: block so changing it to display: inline-block and it works.

要使其在IE11中正常运行，span需要display: inline(或只是删除display:...)，以便使用其默认设置.

For it to work in IE11, the span need display: inline (or just remove the display:...) so it use its default.

更新2基于有关无法在Edge中运行的评论

如果需要span作为块显示，请将其更改为div，并且可以在Edge和IE11中使用.

If you need the span to display as block, changing it to a div and it works in both Edge and IE11.

使用您的脚本更新的小提琴

这篇关于CSS指针事件悬停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！