html - 在悬停另一个 div 时更改多个 div

Question

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

我有 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 前面时代码不起作用...

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

大卫

Answer 1

我建议您像这样尝试一些 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>