make css:hover只影响父元素

Question

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

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

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

Answer 1

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

1. 你可以添加指针事件:none; 你的孩子元素 - 但它也不会响应它自己的悬停样式.遗憾的是,在版本11以下的IE中不支持指针事件(http://caniuse.com/#search=pointer-events).

2. 将您的父元素(除了定位的子元素)的内容包装在另一个元素中(这是该方法的成本)并将悬停样式应用于此包装器.

这两种方法的例子在这里.

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

Answer 2

简单地说:不要嵌入你的#inner div内心.小演示:小链接.请注意,我补充说:

html, body {
    position: relative;
}

在这种情况下哪个是必要的.

编辑:如果你坚持让它嵌套,需要一些JavaScript.这是一个示例:

var inn = document.getElementById("inner"), outt = document.getElementById("holder");
outt.onmouseover = function() {
   this.style.backgroundColor = "rgb(0, 162, 232)"; /*I like this color :)*/
}
outt.onmouseout = function() {
   this.style.backgroundColor = "orange";
}
inn.onmouseover = function(ev) {
   ev.stopPropagation();
}

(如果使用jQuery编写,这会更短,但想法是一样的).

这是一个演示:小链接.