css - 使 css :hover 只影响父元素

Question

在css中，当子事件悬停时，如何停止:hover在父元素中触发的事件，以便仅在父元素本身悬停时触发？在这种情况下，我的子元素实际上以绝对定位定位在其父元素之外，因此当子元素悬停时父元素发生变化时，这有点奇怪。

我做了一个JSFiddle来说明这个问题。

这是我的示例使用的解决方案的JSFiddle。

Answer 1

有一个纯 css 解决方案（实际上甚至有两个），但两者都是有代价的。

1. 您可以添加指针事件：无；到您的子元素 - 但它也不会响应它自己的悬停样式。不幸的是，IE 版本 11 ( 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 编写会更短，但想法是一样的）。

这是一个演示：小链接。

Answer 3

您需要使用一些 JavaScript 来阻止事件冒泡。看看这个例子：

css :hover 只影响嵌套的顶部 div