如果我有标记:
<div class="a b"></div>
其中 .a 类有一个与之关联的悬停类
并且 .b 类有一个与之关联的伪元素...就像这样:
div
{
width: 100px;
height: 100px;
}
.a { background: red; display: inline-block; }
.a:hover { background: green; }
.b:after
{
content: '';
display: inline-block;
width: 100px;
height: 100px;
margin-left: 100px;
background: pink;
}
css 是否可以防止伪元素触发 .a 类悬停?
FIDDLE http://jsfiddle.net/danield770/jZ4Sb/
下面的 css 可以满足现代浏览器的需要(不是IE10-) http://caniuse.com/#feat=pointer-events:
.b:after {
pointer-events: none;
}
pointer-events: none
允许元素不接收悬停/单击事件。
See 这把小提琴 http://jsfiddle.net/wbNy5/4/.
Caution
pointer-events
对非 SVG 元素的支持还处于相对早期的状态。开发者.mozilla.org https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events给您以下警告:
在 CSS 中对非 SVG 元素使用指针事件是
实验性的。该功能曾经是 CSS3 UI 草案的一部分
规范,但由于许多未解决的问题,已被推迟到
CSS4。
Chrome的盒子模型解读display: inline-block
导致闪烁上面的小提琴 http://jsfiddle.net/wbNy5/4/.
如果你切换到display: block
相反,您将获得该框的正确解释。
火狐浏览器没有这个问题。
为了确保盒模型解释一致,请使用以下命令:
.b:after {
pointer-events: none;
display: block;
}
View 这把小提琴 http://jsfiddle.net/sBRwc/1/在 Chrome 中查看闪烁效果。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)