html - 如何一次将悬停元素添加到多个元素？

Question

好吧，我正在为这个网站编写一个类(class)，我想要它，这样每次你将鼠标悬停在图像或文本上时，图像都会变为填充图像而不是基于笔划，并且文本从蓝色反转白底到蓝底白。我希望它是这样的，如果您将鼠标悬停在这些元素中的任何一个上，所有文本和图像都会同时更改。 inactive state active state

这是我的代码:

.exhibition {
  margin-left: %;
  margin-right: auto;
  width: 25%;
  max-width: 25%;
  float: left;
}
.exhibition img {
  width: 180px;
  height: auto;
  margin: 0 auto;
}
.exhibition b {
  font-family: 'Open Sans', 'Arial', sans-serif;
  background-color: #ffffff;
}
.exhibition i {
  font-family: 'Source Sans Pro', 'Arial', sans-serif;
  background-color: #ffffff;
}
.exhibition p {
  padding-left: 1em;
  padding-right: 1em;
}
h1.suit a {
  display: block;
  width: 180px;
  height: 180px;
  background-image: url(images/icons/suit_stroke_large.png);
  text-indent: -99999px;
  white-space: nowrap;
  float: left;
}
h1.suit a:hover {
  background-image: url(images/icons/suit_fill_large.png);
  -webkit-transition: background 150ms ease-in-out;
  -moz-transition: background 150ms ease-in-out;
  -ms-transition: background 150ms ease-in-out;
  -o-transition: background 150ms ease-in-out;
  transition: background 150ms ease-in-out;
}

<div class="exhibition">
  <h1 class="suit"><a href="#">Suit Icon</a></h1>
  <p>
    <b class="lorem">Gilbert &amp; George: The Early Years</b>
    <br>
    <i class="lorem">May 9 - September 27, 2015</i>
  </p>
</div>

Answer 1

要在不使用 JavaScript 的情况下执行此操作，您可以在两个元素的父元素上使用 :hover。如果父级有其他您不想触发 :hover 效果的子级，那么您需要将它们向上移动一个级别或添加另一个元素(例如 div)来容纳这两个元素。

然后你可以这样做:

#parent #child1 {
    color: black;
}
#parent:hover #child1 {
    background-color: black;
    color: white;
}

#parent #child2 {
    background-image: url("image1.jpg");
}
#parent:hover #child2 {
    background-image: url("image2.jpg");
}