指针事件不影响 Firefox 和 Opera 中的滚动条

Question

当我在 Firefox 44 中发现有关 pointer-events 的内容时，我正在 CSS 中的下拉菜单中工作。起初我认为这是新版本 Firefox 中发生的错误，但是又在Firefox 25看到了这个问题，在Opera 18（运行ning webkit）也存在。

代码本身可能会很混乱，所以我做了另一个示例：

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 is completely supported in all major browsers，怎么了？我错过了什么吗？

编辑：
它在较新版本的歌剧
中已解决，但我需要它至少在 [=17 的所有常见版本上工作=]、opera 和 firefox
有什么技巧或替代方法吗？

编辑 2： 这是 fiddle https://jsfiddle.net/ja0ct9s6/2/
乍一看效果不错
但是把你的光标移开它，从右侧再次移动它（当你没有看到下拉菜单时），它看起来滚动条仍然可以悬停（？）（记得使用 firefox）

Answer 1

我能想到的唯一解决方法是将它包装在另一个 <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>

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 包裹在 parent 中并限制了它的尺寸。出现滚动条，children.

上没有出现奇怪的悬停

Answer 3

同样，这不是您问题的真正解决方案，但据我所知可能是您问题的解决方案：

为什么不对 showing/hiding 菜单使用 visibility？ visibility: hidden 在菜单可见之前无法访问滚动条。

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

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

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

这里是Fiddle.

顺便说一句：此代码不需要 pointer-events。

指针事件不影响 Firefox 和 Opera 中的滚动条

pointer-events not affecting scrollbars in Firefox & Opera

css

firefox

opera