pointer-events在Firefox和Opera中不影响滚动条

Question

我在CSS中制作下拉菜单时，发现了Firefox 44中的pointer-events问题。起初我以为这是Firefox新版本中出现的错误，但我又在Firefox 25中看到了这个问题，并且它也存在于运行webkit的Opera 18中。

代码本身可能非常令人困惑，因此我制作了另一个示例：

div {
  width: 150px;
  height: 200px;
  line-height: 30px;
  background: #DDD;
  /*- overflow-y -*/
  overflow-y: auto;
  /*- pointer events -*/
  pointer-events: none;
}
div:hover {
  background: #D77;
}

<div>
  text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>
</div>

正如您所看到的，div元素的pointer-events属性被设置为none，因此我们预计它根本不会运行:hover。

但是请继续在滚动条上移动鼠标指针（在Firefox和Opera中）。 pointer-events在所有主要浏览器中都得到了完全支持，那么出了什么问题？我有什么遗漏吗？

编辑：在较新版本的Opera中已解决此问题，但我需要它至少在常见版本的Chrome、Opera和Firefox上运行。有什么诀窍或替代方法吗？

编辑 2：这里是 fiddle https://jsfiddle.net/ja0ct9s6/2/
乍一看，它工作得很好
但是把光标移出它，再从右侧移入（当你看不到下拉菜单时），它看起来仍然可以悬停滚动（记得使用火狐浏览器）

- javad

---

只是为了澄清：您最初的关注点是显示滚动条，但使它们无法操作，可以说是只读。是这样吗？ - Linus Caldwell

只需要几分钟，我正在为它创建一个 Fiddle。 - javad

刚刚更新了我的问题。 - javad

你使用 opacity 来隐藏子菜单有充分的理由吗？ - Linus Caldwell

当然，我可以使用 display:none，但这样就无法实现平滑的过渡效果（显示状态会在50%突然改变）。 - javad

我明白了，像我在第二个答案中展示的那样，使用visibility。也许你需要稍微调整一下transition属性，加上一个延迟，并包含visibility，但这应该很容易。 - Linus Caldwell

Answer 1

虽然这不是你问题的真正解决方案，但是根据我的理解，可能可以解决你的问题：

为什么不使用visibility来显示/隐藏菜单呢？使用visibility: hidden时，直到菜单可见，滚动条才会变得可用。

#navigation>li>ul{
  /*...*/

  /*to hide it by default*/
  visibility: hidden;
  opacity:0;
}

/*hovers*/
#navigation>li:hover>ul{
  visibility: visible;
  opacity:1;
}

这里有一个代码片段。

顺便说一下：使用此代码不需要pointer-events。

- Linus Caldwell

Answer 2

我不确定你的最终目标是什么...但也许这个可能会有所帮助？http://codepen.io/ijmccallum/pen/reMYXN

<div class="parent">
  <div class="child">
  text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>text
  <br/>
    </div>
</div>

.parent {
  height: 150px;
  width: 150px;
  /*- overflow-y -*/
  overflow-y: scroll;
  overflow-x: hidden;
  /*- pointer events -*/

}
.child {
  line-height: 30px;
  background: #DDD;
  pointer-events: none;
}
.parent:hover {
  background: #D77;
}

我刚刚将您的 div 放在一个父元素中，并限制了其尺寸。现在出现了滚动条，子元素也不会出现奇怪的悬停效果。

- Iain J McCallum

Answer 3

我所能想到的解决方法只有把它包装在另一个 <div> 中并让其溢出。但显然这不是真正的解决方案，只是一个权宜之计。也许在你的情况下甚至不可能这样做，因为你说原始代码很复杂。

.wrapper {
  width: 150px;
  height: 200px;
  /*- overflow-y -*/
  overflow-y: auto;
}
.wrapper > div {
  line-height: 30px;
  background: #DDD;
  /*- pointer events -*/
  pointer-events: none;
}
.wrapper > div:hover {
  background: #D77;
}

<div class="wrapper">
  <div>
    text
    <br/>text
    <br/>text
    <br/>text
    <br/>text
    <br/>text
    <br/>text
    <br/>text
    <br/>
  </div>
</div>

- Linus Caldwell

---

谢谢你的回答，但是我需要将它完全设置为不活动状态，可见但不可触摸，也许在Firefox和旧版Opera中有一个替代pointer-events的方法可以帮助我。 - javad