Html 如何使用css更改悬停时2个元素的背景

我正在努力解决这个问题。如果用户将鼠标悬停在父元素上，我想更改两个子元素的背景

下面是使用我当前拥有的代码显示的图像。悬停时的图像应该是全棕色的，没有蓝色

HTML：

    <div id="nav-about" class="nav-btn">
      <h2>About Us</h2>
      <div class="nav-btn-lt"></div>
      <div class="nav-btn-rt"></div>
    </div>

---

将鼠标悬停在父元素上时，是否可以更改两个子元素上的图像？

您可以将父元素的悬停状态作为目标，并添加希望修改其属性的任何子元素

.nav-btn:hover .nav-btn-lt,
.nav-btn:hover .nav-btn-rt {
    background: blue;
}

jshiddle:

想法稍有不同 这是一个使用较少HTML的想法；它让CSS完成所有的样式设置

内部div被替换为

例子 在本例中，两个伪元素具有不同的背景图像颜色。这些将被替换为您的背景图像，以及宽度和高度修改，以适应

• 伪元素的目标是使用

  .nav btn:hover:before

  /

  :after

• h1

  上的

  position:relative

  确保它显示在背景上方

“运行代码段”以查看结果：

.nav btn{
位置：相对位置；
高度：110px；
光标：指针；
边框顶部：2个实心#effff；
边框底部：2px实心#1F3152；
宽度：200px；
显示：块；
过渡：0.5s边界；
}
.nav btn h1{
位置：相对位置；
利润率：10px 0 10px；
字号：1.5em；
颜色：#212121；
过渡：0.5s颜色；
}
.nav btn：之前{
内容：''；
显示：块；
位置：绝对位置；
顶部：0px；
左：0；
宽度：180px；
身高：100%；
背景：url(http://www.placehold.it/180X110/ffeb3b )不重复；
}
.nav btn：之后{
内容：''；
显示：块；
位置：绝对位置；
排名：0；
右：0；
宽度：20px；
身高：100%；
背景：url(http://www.placehold.it/20X110/fff59d  )不重复；
}
.nav btn：悬停{
边框颜色：#fb8c00；
}
.nav btn：悬停h1{
颜色：#f3e5f5；
}
.nav btn:悬停：之前{
背景：url(http://www.placehold.it/180X110/9c27b0)不重复；
}
.nav btn:悬停：之后{
背景：url(http://www.placehold.it/20X110/ab47bc )不重复；
}

盘旋我们

谢谢你的编辑，贾丁。类似于

.nav btn:hover>div:first child{hover bg}

和

的内容。nav btn:hover>div:last child{hover bg}

谢谢先生。我要试一试。我以为这会更复杂一点。很高兴看到这是一个简单的修复。您可能还需要在CSS的其他地方进行一些更改

.nav btn:hover>div:first child

仅当按钮的第一个div子元素是

.nav btn

的直接子元素时，才会选择该按钮的第一个div子元素。当然，您可以像下面的答案一样针对这些类：）实际上，您的第一条规则是开箱即用的。真不敢相信这么容易。非常感谢。杰瑞，我刚看了你的网站，想问问。。。谁做你的平面设计工作？太神奇了。

.nav-btn:hover .nav-btn-lt,
.nav-btn:hover .nav-btn-rt {
    background: blue;
}