Question

当我在Firefox 44中发现pointer-events的某些内容时，我正在使用CSS中的下拉菜单。起初我认为在新版本的Firefox中会出现错误，但我在Firefox中看到了这个问题再一次，它也存在于Opera 18（运行webkit）中。

代码本身可能非常令人困惑，所以我又做了一个样本：

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，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 ）

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;
}

这是Fiddle。

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

Answer 2

只有我可以想到的解决方法是将它包装在另一个<div>中并让它溢出。但它显然不是一个真正的解决方案，只是一个解决方案。也许这在你的情况下是不可能的，你说你原来的代码很复杂。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 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包裹在父母中并限制了它的尺寸。滚动条出现，孩子们没有发生奇怪的悬停。

指针事件不会影响Firefox中的滚动条和＆amp;歌剧

3 个答案: