使 css :hover 只影响父元素

2022-01-22 00:00:00 hover css pseudo-class

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

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.

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

I made a JSFiddle to illustrate the problem.

这是我的示例所用解决方案的 JSFiddle.

推荐答案

有一个纯 css 解决方案(实际上甚至有两个)，但都是有代价的.

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

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

  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).

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

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.

两种方法的示例这里.

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

相关文章