Question

好吧所以我正在为这个网站编写一个类，我想拥有它以便每次将鼠标悬停在图像或文本上时，图像会变为填充图像而不是基于笔划而文本会从蓝色反转对白色的白色背景在蓝色背景。我希望它是这样的，如果你将鼠标悬停在这些元素中的任何一个上，所有文本和图像都会同时发生变化。 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的情况下执行此操作，您可以使用：将鼠标悬停在两个元素的父元素上。如果父母有其他孩子，你不想触发：悬停效果，那么你需要将它们向上移动一个级别或添加另一个元素，如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");
}

Answer 2

您可以将悬停设置为.exhibition而不是h1.suit a。所以它看起来像这样.exhibition:hover h1.suit a。要为文字（b和i）应用背景和颜色，您可以应用以下样式：

.exhibition:hover p, .exhibition:hover b, .exhibition:hover i {
    background-color: #006;
    color: #fff;
}

这是小提琴：http://jsfiddle.net/k7moorthi/ay7x8zgo/1/

希望这会对你有所帮助。

如何一次向多个元素添加悬停元素？

2 个答案: