在悬停另一个 div 时更改多个 div答案

【问题标题】：Change multiple div's on hover another div在悬停另一个 div 时更改多个 div
【发布时间】：2015-06-22 21:56:22
【问题描述】：

我发现了很多类似的问题，但没有一个适合我的解决方案。

我有 3 张图片并排显示。这些图像是带有 CSS 的背景图像。我稍后解释原因：

<div class="team-photo-container">

<div class="team-photo-wrapper">

    <div class="team-photo david"></div>

    <div class="team-photo charlotte"></div>

    <div class="team-photo timon"></div>

</div>

当我将鼠标悬停在第一个图像 (.david) 上时，我希望其他两个 (.charlotte 和 .timon) 的背景图像发生变化。我得到了这个：

.charlotte:hover ~ .david {
background-image: url(../../images/basic-david-right.jpg) !Important;
}

.charlotte:hover ~ .timon {
    background-image: url(../../images/basic-timon-left.jpg) !Important;    
}

现在我的问题：

我希望其他图像也发生同样的情况。因此，当我将鼠标悬停在 .charlotte 上时，我希望 .david 和 .timon 的背景图像发生变化。但它只会改变.timon。当我在.timon 上尝试悬停代码时，都没有改变...

我认为当 div 在悬停 div 前面时代码不起作用...

希望你们能理解我的问题！抱歉说英语，我是荷兰人。

大卫

【问题讨论】：

你不能用 CSS 选择前一个元素，你需要 jQuery 或 Javascript

标签： html css image hover background-image

【解决方案1】：

如果你想用纯 CSS 来做这件事，这可能会起作用（Sass 代码，请参阅 Codepen here）：

.team-photo-wrapper
  width: 400px // or something…
.team-photo
  width: 400px
  height: 200px
  background-size: cover
.david
  background-image: url("http://lorempixel.com/399/200/")
  &:hover
    background-image: url("http://lorempixel.com/300/150")
.charlotte
  background-image: url("http://lorempixel.com/400/200/")
  &:hover
    background-image: url("http://lorempixel.com/300/150")
.timon
  background-image: url("http://lorempixel.com/401/200/")
  &:hover
    background-image: url("http://lorempixel.com/300/150")

// Magic part  
.team-photo-wrapper:hover :not(:hover)
  background-image: url("http://lorempixel.com/402/200/")

如果您需要为不同的人提供不同的图像，您可以将类链接到选择器，例如.team-photo-wrapper:hover :not(:hover).timon

请注意，:not 选择器如果使用太频繁，性能会很差……

【讨论】：

【解决方案2】：

使用 jQuery 可能更直接：

$(".team-photo").hover(function() {
    $(this).siblings("div").addClass("hover");
}, function() {
    $(this).siblings("div").removeClass("hover");
});

See JSFiddle

当您使用背景图片时，您可能希望将我的 Fiddle 的 CSS 中的 hover 类转换为类似这样的内容...

.david.hover {
    background-image: url(../../images/basic-david-right.jpg) !Important;
}
.timon.hover {
    background-image: url(../../images/basic-timon-right.jpg) !Important;
}

【讨论】：

【解决方案3】：

这很正常，如果您阅读 W3C 规范：

E ~ F ===> 一个 F 元素前面有一个 E 元素

来源：http://www.w3.org/TR/css3-selectors/#selectors

只针对下一个元素而不是上一个元素。
没有选择器可以让你做你想做的事。

但是你可以试试这样的：

// Hover sibling states
.team-photo-wrapper:hover .charlotte {
    background-image: url(../../images/hover-david-right.jpg);
}

.team-photo-wrapper:hover .timon {
    background-image: url(../../images/hover-timon-left.jpg);    
}

// Basic states
.team-photo-wrapper .charlotte {
    background-image: url(../../images/basic-david-right.jpg) !important;
}
.team-photo-wrapper .timon:hover {
    background-image: url(../../images/basic-timon-left.jpg) !important;    
}

【讨论】：

【解决方案4】：

我建议你尝试一些像这样的 jQuery：

$(document).on('mouseenter', '.block', function() {
  var that = $(this);
  that.removeClass('nearTarget').addClass('target');
  $('.block').not(this).addClass('nearTarget').removeClass('target');
}).on('mouseleave', '.block', function() {
  var that = $(this);
  $('.block').removeClass('nearTarget target');
})

.block {
  width: 100px;
  height: 80px;
  float: left;
  margin: 10px;
  background-color: green;
}
.block.target { background-color: red; }
.block.nearTarget { background-color: #999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
  
  <div id="one" class="block"></div>
  <div id="two" class="block"></div>
  <div id="three" class="block"></div>
  
</div>

【讨论】：