在 css 中,当子事件悬停时,如何停止在父元素中触发 :hover
事件,以便它仅在父元素本身悬停时触发?在这种情况下,我的子元素实际上位于其具有绝对定位的父元素之外,因此当子元素悬停时父元素发生变化,这有点奇怪。
我做了一个JSFiddle来说明问题。
这是一个 JSFiddle我的示例使用的解决方案。
最佳答案
有一个纯 css 解决方案(实际上甚至有两个),但两者都是有代价的。
您可以添加指针事件:无;到您的子元素 - 但它也不会响应它自己的悬停样式。 Pointer-events不幸的是,在版本 11 ( http://caniuse.com/#search=pointer-events) 以下的 IE 中不受支持。
将父元素的内容(定位的子元素除外)包装在另一个元素中(这是此方法的成本)并将悬停样式应用于此包装器。
两种方法的示例 here .
.parent-2,
.parent { position:relative; background:#ddd; width:100px; height:100px; }
.parent:hover { background:blue; }
.child { position:absolute; top:0; left:130px; width:100px; height:50px; border:1px solid blue; pointer-events:none; }
/* doesn't work in opera and ie */
.content { position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.content:hover { background:blue; }
关于css - 制作 CSS :hover only affect parent element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12652525/