make css：hover只影响父元素

在css中,如何在子事件悬停时停止在父元素中触发的：hover事件,以便仅在父元素悬停时触发它？在这种情况下,我的子元素实际上位于它的父元素之外,具有绝对定位,所以当父元素被悬停时父元素发生变化时有点奇怪.

我做了一个JSFiddle来说明问题.

这是我的例子中使用过的解决方案的JSFiddle.

解决方法

有一个纯粹的CSS解决方案(事实上甚至两个),但两者都需要付出代价.

>您可以添加指针事件：无;对你的孩子元素 – 但它也不会响应它自己的悬停样式.不幸的是,在版本11(http://caniuse.com/#search=pointer-events)以下的IE中不支持Pointer-events.
>将父元素的内容(除了定位子元素)包装在另一个元素中(这就是此方法的成本)并将悬停样式应用于此包装器.

两种方法的示例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; }