【问题标题】：How to change background on hover for 2 elements using css如何使用css更改2个元素的悬停背景
【发布时间】：2014-12-12 12:51:00
【问题描述】：

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

这是使用我当前拥有的代码时该图像的外观。悬停时应该是全棕色的图像，没有蓝色。

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 类使用重复的 x 背景，nav-btn-lt 类是一个阴影，遗憾的是我无法使用 css 重现，而 nav-btn-rt 类是我无法显示的图像悬停时。

这是 CSS：

 .nav-btn {
  position:relative;
  width:22%;
  display:inline-block;
  height:110px;
  cursor:pointer;
  margin:11px 2% 0 0;
  border-top:2px solid #EFFFFF;
  border-bottom:2px solid #1F3152;
  background:url(bg-btn-off.gif) repeat-x;
  }

  .nav-btn:hover {
  background:url(bg-btn-on.gif) repeat-x;
  }

  .nav-btn h2 {
  position:absolute;
  top:10px;
  left:10px;
  font-size:150%;
  font-weight:600;
  color:#eee;
  }

  .nav-btn-lt {
  position:absolute;
  top:-2px;
  left:0;
  width:2px;
  height:114px;
  background:url(lt-nav.png) no-repeat 0 0;
  }

  .nav-btn-rt {
  position:absolute;
  top:-2px;
  right:0;
  width:54px;
  height:114px;
  background:url(rt-nav-off.png) no-repeat 0 0;
  }

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

【问题讨论】：

感谢您的编辑，贾廷。
类似.nav-btn:hover > div:first-child {hover-bg} 和.nav-btn:hover > div:last-child {hover-bg}
谢谢 ManSam 先生。我会试一试。我认为这会更复杂一些。很高兴看到这很容易解决。
您可能还需要在 CSS 的其他地方进行一些更改。 .nav-btn:hover > div:first-child 只会选择按钮的第一个 div 子元素，其中第一个 div 是.nav-btn 的直接子元素。当然，您也可以像下面的答案一样定位类:)
实际上，您的第一条规则开箱即用。我不敢相信这很容易。谢谢！

标签： html css

【解决方案1】：

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

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

JSFiddle：http://jsfiddle.net/0zqm0bd7/1/

【讨论】：

杰瑞，我刚刚浏览了您的网站并想问...您的平面设计工作是谁？太棒了。

【解决方案2】：

略有不同的想法

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

内部 div 替换为 :before and :after pseudo elements.

示例

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

伪元素以.nav-btn:hover:before/:after悬停为目标
h1 上的position: relative 确保它显示在背景之上。

“运行代码sn-p”查看结果：

.nav-btn {
  position: relative;
  height: 110px;
  cursor: pointer;
  border-top: 2px solid #EFFFFF;
  border-bottom: 2px solid #1F3152;
  width: 200px;
  display: block;
  transition: 0.5s border;
}
.nav-btn h1 {
  position: relative;
  margin: 10px 0 0 10px;
  font-size: 1.5em;
  color: #212121;
  transition: 0.5s color;
}
.nav-btn:before {
  content: '';
  display: block;
  position: absolute;
  top: 0px;
  left: 0;
  width: 180px;
  height: 100%;
  background: url(http://www.placehold.it/180X110/ffeb3b ) no-repeat;
}
.nav-btn:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: url(http://www.placehold.it/20X110/fff59d  ) no-repeat;
}
.nav-btn:hover {
  border-color: #fb8c00;
}
.nav-btn:hover h1 {
  color: #f3e5f5;
}
.nav-btn:hover:before {
  background: url(http://www.placehold.it/180X110/9c27b0) no-repeat;
}
.nav-btn:hover:after {
  background: url(http://www.placehold.it/20X110/ab47bc ) no-repeat;
}

<div class="nav-btn">
  <h1>Hover Us</h1>
</div>

【讨论】：