时间戳

首页 > 解决方案 > :hover 如何忽略空白区域？

css - :hover 如何忽略空白区域？

问题描述

因此，我的理解（由下面的代码演示）是，如果鼠标位于为元素定义的区域或其任何溢出的内容或子元素上，则 :hover 对于块元素是正确的。请注意， .outer div 会变为蓝色，即使它不在文本内容之上，特别是。

然而，我还没有成功地从一个极其复杂的页面中分离出一个小测试用例，这表明在某些情况下，:hover 效果只发生在内容上，元素的空白区域不会导致 :hover被启用。

这在 Firefox 和 Chrome 中都会发生。所以我的问题是，哪些功能会导致 div 的空白区域被 :hover 效果忽略？我没有在 css 文档中找到对此类交互的参考，既不是从 :hover 功能的描述开始，也没有从我能找到的任何其他参考 :hover 开始。

另一个问题是，如果有一些功能会导致这种行为，是否符合标准，或者浏览器中的错误？

.outer:hover { background: blue; }
.outer {
  font-size: 30px;
width: 10em; 
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>

标签： css

解决方案

@victoria我找到了一个解决方案，如果没有高度给pfloat:left; clear:both;并悬停在外部应该使段落颜色为蓝色，这将消除空白悬停。

希望这会有所帮助！

 
.outer p{ float: left; clear:both;}
.outer:hover p{ background: blue; }

.outer {
  font-size: 30px;
width: 10em; 
height: 2.7em;
overflow: visible;
z-index: 4;
}
<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>

推荐阅读