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

Question

我有时间试图解决这个问题。如果用户将鼠标悬停在父元素上，我想更改两个子元素的背景。

以下是使用我目前拥有的代码的图像。悬停时应该是什么样的全棕色图像，没有蓝色。

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;
  }

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

Answer 1

您可以定位父级的悬停状态，并添加您希望修改其属性的所有子元素。

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

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

Answer 2

略有不同的想法

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

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

实施例

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

• 使用.nav-btn:hover:before / :after

将伪元素定位为悬停

• position: relative上的h1可确保它显示在背景上方。

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

.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>