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

【问题标题】：pointer-events not affecting scrollbars in Firefox & Opera指针事件不影响 Firefox 和 Opera 中的滚动条
【发布时间】：2016-03-13 21:43:00
【问题描述】：

当我在 Firefox 44 中发现有关 pointer-events 的内容时，我正在 CSS 中的下拉菜单上工作。起初我以为这是在新版本的 Firefox 中发生的错误，但我在 Firefox 25 中再次看到了问题，并且它也存在于 Opera 18（运行 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，怎么了？我错过了什么吗？

编辑：
它已在较新版本的歌剧中得到解决
但我需要它至少适用于所有常见版本的 chrome、opera 和 firefox 有什么技巧或替代方法吗？

编辑 2： 这是小提琴https://jsfiddle.net/ja0ct9s6/2/
乍一看，它工作得很好
但是将光标移出它，从右侧再次将其移入（当您看不到下拉菜单时），看起来滚动条仍然可以悬停（？）（记得使用firefox）

【问题讨论】：

只是为了澄清：您最初关心的是显示滚动条，但使它们处于非活动状态，可以说是只读的。对吗？
几分钟...，我正在为它做小提琴
刚刚更新了我的问题
您是否出于正当理由使用opacity 隐藏子菜单？
当然，我会使用display:none，但那样我就不能有一个清晰的过渡（显示突然改变了50%）

标签： css firefox opera

【解决方案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;
}

这是Fiddle。

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回答，但我必须让它完全不活动，可见但不可触摸，也许是 Firefox 和旧 Operas 的 pointer-events 的替代品可以帮助我

【解决方案3】：

我不确定您的最终目标是什么……但也许这可能会有所帮助？ 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 包装在一个父级中并限制了它的尺寸。出现滚动条，孩子身上没有发生奇怪的悬停。

【讨论】：