Question

我尝试在其中创建包含文本的div，只要用户将鼠标悬停在div区域，而不仅仅是p标记，该文本就会发生变化。然而，我无法使我的解决方案有效。

div{
  height:200px;
  width:400px;
  background-color:#fbfb2b;    
}

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

Answer 1

删除css中的+符号：

CSS：

div{
  height:200px;
  width:400px;
  background-color:#fbfb2b;    
}

div:hover p{
  color:#fff;
}

如果您正在寻找选择器，这意味着div的直接后裔，您需要>。

例如：

div:hover > p{
  /*styles*/
}

哪个适用于：

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

但不是

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

使用您当前的CSS，您正在尝试选择兄弟。

如果你的HTML是这样的：

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

p的颜色会发生变化。

但是，最终，使用此特定HTML，您甚至不需要在{c}中包含p，而只能div:hover，但如果您将拥有其中的其他元素，那么你应该保留p。

Answer 2

您必须阅读有关后代选择器 here的规则。如果您需要有关selectors in css

的更多信息

解决：

div:hover p{
  color: #fff;
}

Answer 3

取出+ P

div:hover {
    color: #fff;
}

Answer 4

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

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

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

div:hover p{
 color:#fff;
}

Answer 5

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

div:hover {
  color:#fff;
}

但是，如果您只想定位段落文本，则只使用＆gt; （儿童组合者）仅针对P。

Answer 6

你的Css：

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

+选择器选择紧跟在<p>元素之后的所有<div>元素。

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

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

所以，你应该试试这个：

div:hover p{    
   color:#fff;
}