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>

Answer 2

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

E~F ===＆gt;一个前面有E元素的F元素

来源：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;    
}

Answer 3

使用jQuery可能更直接：

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

See JSFiddle

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

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

Answer 4

如果你想用纯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

请注意：如果经常使用，那么选择器的性能会非常差......

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

4 个答案: