ul {
max-height: 0;
overflow: hidden;
margin: 10px;
padding: 0;
border: 10px solid #bada55;
list-style-type: none;
transition: border-color .4s;
}
ul:hover {
max-height: 100px;
border-color: #de2d26;
}
ul > li {
padding: 10px;
pointer-events: auto;
}
.ignorant {
pointer-events: none;
}
.offset {
position: relative; /* This is the culprit! */
}
<ul class="ignorant">
<li>I am ignorant of your pointer.
If you see me,something went wrong!</li>
</ul>
<ul>
<li>I am not. Hover me!</li>
</ul>
<ul class="ignorant offset">
<li>I should be ignorant of your pointer.
If you see me,something went wrong!</li>
</ul>
建立.我们有三个列表,其中内容是隐藏的,因为列表的max-height设置为0.边框仍然显示,这是预期的行为：元素by default的height指令仅适用于元素的内容.
我们通过将max-height设置为足够大的值来显示列表的悬停内容.
现在,我想使列表只有当内容被悬停而不是边框时才可见.我认为,应该使用pointer-events可以实现,如上所示.忽略边界上的事件,并重新启用列表中的项目.
问题.到目前为止,这么好,这在Firefox和Chrome中都可以正常工作.也就是说,当我定位容器relative时,可以触发Chrome中的内容悬停.
Firefox仍然像我所期望的那样工作,不会触发悬停.当没有边框时,Chrome中不可能触发悬停.
题.这是Chrome中的错误吗？还是没有明确规定如何处理这种情况,因此是不明确的行为？我将对以下任何一种感兴趣：
一个解释我在做错什么,为什么;
2.在这种情况下,为什么不同浏览器的行为方式不一样？
3.简要说明为什么这是一个错误.在这种情况下,我很乐意报告一个.
这是测试,在这一刻,与
&安培;子弹; Firefox 52.0.1(64位Linux N);
&安培;子弹; Firefox 52.0.2(64位Windows N);
&安培;子弹; Internet Explorer 11.0.9600.17031(64位Windows N);
&安培;子弹; Chrome 57.0.2987.133(64位Linux S,64位Windows S);
&安培;子弹; Chromium 57.0.2987.98(64位Linux S).
S表示,当使用相对定位时,N表示悬停时未显示.
感谢BoltClock通过他们的建设性意见更好地提出这个问题.
解决方法
简而言之,知道来源是知道修复(测试和工作)：当您需要设置位置：相对于父对象时,还设置位置：相对于子对象：
/* ... */
.offset {
position: relative; /* This is the culprit! */
}
.offset > * {
position: relative; /* And this is the fix! */
}
ul {
max-height: 0;
overflow: hidden;
margin: 10px;
padding: 0;
border: 10px solid #bada55;
list-style-type: none;
transition: border-color .4s;
}
ul:hover {
max-height: 100px;
border-color: #de2d26;
}
ul > li {
padding: 10px;
pointer-events: auto;
}
.ignorant {
pointer-events: none;
}
.offset {
position: relative; /* This is the culprit! */
}
.offset > * {
position: relative; /* And this is the fix! */
}
<ul class="ignorant">
<li>I am ignorant of your pointer.
If you see me,something went wrong!</li>
</ul>
那就是你想要的,对吧？跨浏览器.
注意：它不一定是相对的.它必须是静态的.
