Html 悬停div时更改字体颜色

我试图创建一个包含文本的div，每当用户将鼠标悬停在

div

区域，而不仅仅是

p

标记上时，该div就会发生变化。然而，我无法使我的解决方案起作用

---

去掉css中的

+

符号：

CSS:

如果要查找表示

div

的直接后代的选择器，则需要

例如：

这将有助于：

<div>
  <p>Stuff</p>
</div>

东西

但不是

<div>
  <span>
    <p>Incorrect HTML example</p>
  </span>
</div>

错误的HTML示例

使用当前CSS，您将尝试选择兄弟姐妹

如果您的HTML是这样的：

<div></div>
<p>Some piece of text that is gonna change color when hovering the div</p>

当鼠标悬停在div上时会改变颜色的文本

p

的颜色会改变

然而，最终，对于这个特定的HTML，您甚至不需要在css中包含

p

，只需执行

div:hover

，但是如果您要在其中包含其他元素，那么您应该保留

p
，您必须阅读关于后代选择器的规则。
如果你需要更多关于


解决了的：
去掉+p

div:hover {
    color: #fff;
}

在你的css中，你已经这样使用了

div:hover + p{
 color:#fff;
}

这意味着您正在为兄弟元素而不是子元素应用悬停样式。在您的情况下，您需要删除+并仅添加空间


根本不需要提及
，您可以通过在父元素上设置样式来简单说明所有子元素的颜色：


但是，如果您只想以段落文本为目标，则可以使用>（子组合符）以p为目标。
您的Css：

div:hover + p{
  color:#fff;
}

+
选择器选择紧跟在
元素之后的所有
元素


您可以看到，在上面的提琴
div:hover+p
中，选择外部
元素，这些元素紧跟在
元素之后

但在您的情况下，不需要使用
+
选择器。因为要选择悬停div的子元素

因此，您应该尝试以下方法：

div:hover p{    
   color:#fff;
} 


div:hover {
    color: #fff;
}

div:hover + p{
 color:#fff;
}

div:hover p{
 color:#fff;
}

div:hover {
  color:#fff;
}

div:hover + p{
  color:#fff;
}

div:hover p{    
   color:#fff;
}