使css:悬停仅影响父元素

有一个纯css解决方案(事实上甚至有两个),但两者都是有代价的。

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

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

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

简单地说:不要把你的 #inner div 在…内小演示: little link 。请注意,我添加了:

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编写,这会更短,但想法是一样的)。

下面是一个演示: little link 。

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

css :hover only affect top div of nest