更改多个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> 

Answer 2

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

E〜F ===>后面是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");
});

参见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;
}

Answer 4

如果您想使用纯CSS做到这一点，那么这可能会起作用（Sass代码，请参见Codepen在此处 ）：

.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选择器，则性能会很差……