CSS - 悬停通过元素激活覆盖的元素上的悬停 [英] CSS - Hover passes through elements to activate hover on covered element

问题描述

我有一个页面布局涉及很多位置绝对和z索引，因此有很多元素是相互重叠的。

在这个元素下有几个应用了CSS Hover Pseudo Classes的元素。

当鼠标通过包含文本的元素时，我想以某种方式下面的元素响应鼠标的存在并激活伪类样式。

有什么方法可以为元素设置样式，以便允许悬停将其传递给下面的任何元素？

使用JavaScript太难了，但我宁愿不去那条路线，以保持事情尽可能简单。

感谢

- 我现在使用的是HTML5和CSS3，所以对于使用这些新标准的解决方案没有问题。

解决方案

/jsfiddle.net/7aeDt/\">http://jsfiddle.net/7aeDt/

您可以看到，当您将鼠标悬停在顶部的元素被激活。有关此媒体资源的详情： https://developer.mozilla.org/en/CSS/pointer-events

示例：

 < div&在顶部：hover me< / div> 
< div> 1< / div> 
< div> 2< / div> 
< div> 3< / div> 
< div> 4< / div> 
  

css

  div {
 width：200px; 
 height：200px; 
 float：left; 
 cursor：pointer; 
 border：1px green solid; 
} 
 
 div + div：hover {background：＃a1a6c8; } 
 
 div：first-child {
 pointer-events：none; 
 position：absolute; 
 top：100px; 
 left：100px; 
 border：1px green solid; 
 background：＃c1c6c8; 
} 
  

I have a page layout involving a lot of position absolute and z-indexing, so there are a lot of elements that are overlapping one another.

One of the elements just contains text and it hovers over top of a lot of other things.

Underneath that element there are several elements that have CSS Hover Pseudo Classes applied.

When the mouse passes over the element containing text, I would like for somehow the Element underneath to respond to the presence of the mouse and activate the pseudo class styles.

Is there any way to style an element so it allows the hover to pass through it to any elements underneath?

This wouldn't be too hard with JavaScript, but I would rather not go that route at the moment in order to keep things as simple as they can be. I'll be complicating things with JavaScript enough later.

Thanks

P.S. - I'm using HTML5 and CSS3 already, so I would have no problem with solutions utilizing these newer standards.

解决方案

you can use pointer-events: none; to the element on top:

see http://jsfiddle.net/7aeDt/

as you can see, when you hover the element on the top the element behind is activated. For more info about this property: https://developer.mozilla.org/en/CSS/pointer-events

example :

<div> on top of all: hover me </div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

css

div {
   width   : 200px;
   height  : 200px;
   float   : left;
   cursor  : pointer;
   border  : 1px green solid;
}

div + div:hover { background: #a1a6c8; }

div:first-child {
   pointer-events : none;
   position       : absolute;
   top            : 100px;
   left           : 100px;
   border         : 1px green solid;
   background     : #c1c6c8;
}

这篇关于CSS - 悬停通过元素激活覆盖的元素上的悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！