Css 如何忽略空白区域的悬停？

因此，我的理解是，下面的代码证明了这一点：如果鼠标位于为元素定义的区域上，或者位于任何溢出的内容或子元素上，则对于块元素，鼠标悬停是正确的。请注意，.outer div即使不在文本内容上也会变成蓝色，尤其是

我还没有成功地从一个极其复杂的页面中分离出一个小测试用例，但是这表明，在某些情况下，悬停效应只发生在内容上，元素的空白区域不会导致：悬停被启用。 这在Firefox和Chrome中都会发生。所以我的问题是，什么特性导致div的空白区域被忽略：悬停效果？我在css文档中没有找到对此类交互的引用，也没有从：hover特性的描述开始，也没有找到对：hover的任何其他引用

另一个问题是，如果有一些特性导致这种行为，那么这些特性是否符合标准，或者浏览器中是否存在缺陷

.outer:hover{背景：蓝色；}
.外部{
字体大小：30px；
宽度：10em；
高度：2.7em；
溢出：可见；
z指数：4；
}

只是一些无关的东西
项目1

较长的项目2


只是一些无关的东西

如果我理解正确，您希望悬停时使用相同的蓝色背景区域，但仅限于悬停在“项目1”文本上。为此，我将使用伪元素来创建背景色。需要对HTML进行一个小的更改，将一个新的唯一类添加到“悬停触发器元素：

<p class="inner trigger">item 1</p>

现在，您可以有一个绝对定位的伪元素，背景为蓝色，仅在“item1”元素的悬停处：

.content:hover{
背景：#00c；
颜色：#cff；
游标：默认值；
填充：0.2米；
}
.外部{
字体大小：30px；
宽度：10em；
高度：2.7em；
溢出：可见；
z指数：4；
}

只是一些无关的东西
项目1

较长的项目2


只是一些无关的东西

@victoria我想出了一个解决方案，如果没有高度，给p

float:left；clear:both；

和悬停在外层应该使段落颜色变为蓝色，这将消除悬停的空白

希望这会有帮助

.outer p{float:左；clear:两个；}
.outer:悬停p{背景：蓝色；}
.外部{
字体大小：30px；
宽度：10em；
高度：2.7em；
溢出：可见；
z指数：4；
}

只是一些无关的东西
项目1

较长的项目2


只是一些无关的东西

好吧，或者“较长的第2项”文本……或者任何内容。这是一个有趣的想法组合……但我没有看到像我提到的复杂案例中那样的代码（大部分复杂程度似乎与悬停无关：我在复杂的页面上添加了一个悬停，当悬停在空白区域上并没有产生悬停效果时，感到惊讶。添加到整个容器的悬停对于一个卡之外的用例来说并不常见。"显示或诸如此类的内容。请注意您向哪个元素添加了

：hover

css规则。是的，谢谢。刚刚解决了复杂情况下的问题…虽然内容似乎是外部div的内容，但都溢出了：外部div没有高度！一旦我给了它一个高度，它就解决了：hover问题。我想问题是“当您将鼠标悬停在“是”上时，父div背景色应覆盖唯一的子区域而不是空白。@AmarjitSingh您可能是对的，因此我修改了我的答案，添加了另一个使用HTML、CSS和JavaScript的解决方案。感谢您的贡献。这里有很多有趣的技术。需要学习！@AmarjitSingh解决了这个问题。谢谢！您解决了这个问题苏。事实上，这就是复杂页面没有悬停的原因：外框没有高度……但有足够多的大小相等的位置：页面中的绝对覆盖层看起来像一个盒子，所以我完全困惑，直到片刻之前。如果我一看到/读到你的答案，我就可以省下一个小时的脑袋撞击了！欢迎@维多利亚：）任何类型的html/css，你都可以相信我，我只是一条信息。哦，完整地说，第二个问题的答案是肯定的，它符合标准，因为所有的内容都是溢出的内容。

.outer {
  // ...pre-existing CSS for .outer
  position: relative;
}

.trigger:hover:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: blue;
  z-index: 0;
}