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

1. 您可以添加指针事件：none;到你的子元素 - 但它不会响应它自己的悬停样式。 指针事件不幸在IE 11以下版本中不受支持（ http://caniuse.com/#search=pointer-events ）。




2. 将父元素（除了已定位子元素）的内容包含在另一个元素中（即此方法的成本），并将悬停样式应用于此包装器。

两种方法的示例这里。

  .parent-2，
 .parent {position：relative;背景：#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; } 
 / *在歌剧中不起作用，即* / 


 .content {position：absolute; top：0; left：0; width：100％;高度：100％; z-index：0;} 
 .content：hover {background：blue; } 
 

In css, how can I stop the :hover event being triggered in a parent element when a child event is hovered, so that it only gets triggered when the parent itself gets hovered? In this case my child element is actually positioned outside it's parent element with absolute positioning, so it's a bit weird when the parent changes when the child gets hovered.

I made a JSFiddle to illustrate the problem.

Here's a JSFiddle of the used solution to my example.

There is a pure css solution (even two in fact) but both come at a cost.

1. You can add pointer-events:none; to your child element - but it will not respond to it's own hover styles either. Pointer-events unfortunately are not supported in IE below version 11 (http://caniuse.com/#search=pointer-events).

2. Wrap content of your parent element (apart from positioned child) in another one (thats the cost of this method) and apply hover styles to this wrapper.

Examples of both methods 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; }