如何在CSS中实现div:hover时设置内部H2标签的颜色？

你的现有代码部分可行，但无法精准控制内部H2的颜色——当前的color: green是给#moto这个div本身设置文字颜色，如果你的H2没有自定义的color样式，它会继承div的颜色，hover时H2会变绿；但如果H2有自己的颜色设置（比如浏览器默认的标题黑色，或者你自定义了h2 { color: #333; }），这个继承就会被覆盖，H2颜色不会变化。

要精准实现hover时只改变div内部H2的颜色，你需要用CSS后代选择器，直接选中hover状态下的H2元素，具体代码如下：

#moto:hover {
  cursor: pointer;
  border-color: green;
  /* 如果你还需要div本身的文字变绿，可以保留这个color，否则可删除 */
  color: green;
}
/* 新增这部分，专门控制hover时内部H2的颜色 */
#moto:hover h2 {
  color: green;
}

完整示例 #

假设你的HTML结构是这样的：

<div id="moto">
  <h2>这是内部的H2标题</h2>
  <p>这是div里的其他文字</p>
</div>

搭配上面的CSS后，当鼠标悬停在#moto上时：

• div的边框变成绿色，鼠标切换为指针样式
• 内部的H2文字精准变为绿色
• 如果保留了div的color: green，div里的其他文字（比如p标签）也会同步变绿

这种方式完全用CSS实现，不需要任何JavaScript，完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Андреј Ћосо