通过悬停其他div来影响div

Question

我试图通过悬停另一个div来影响一个div，并且我检查了这里已经回答过的许多问题，例如Stackoverflow、这一个和这一个，我成功地做到了一种方法，其中#a影响#b，但我试图让#b影响#a -所以反过来，似乎没有一个方法有效.

这就是起作用的地方；

.plane1:hover ~ .plane2 {
    opacity: 0.2;
    transform: scale(0.9);
}

但所有这些都不起作用；

#plane2:hover #plane1 { background-color: yellow; }
#plane2:hover + #plane1 { background-color: yellow; }
#plane2:hover > #plane1 { background-color: yellow; }
.plane2:hover #.plane1 { background-color: yellow; }
.plane2:hover + .plane1 { background-color: yellow; }
.plane2:hover > .plane1 { background-color: yellow; }

所以不管我怎么做，它似乎都不起作用。(是的，也用~试过)

编辑；我的

<div id="plane1" class="plane1 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity"> 
  <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250" />
  <h4 class="center">That plane</h3>
</div>

<div id="plane2" class="plane2 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity"> 
  <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250" />
  <h4 class="center">That other plane</h3>
</div>

我想在这里完成的http://i.imgur.com/s7atNDr.gif (大到不能上传)

Answer 1

您可以使用jQuery完成此操作，如下所示。仅用css就无法做到这一点，因为选择器只能看到悬停元素之后的元素，在本例中，您还需要前面的元素。这就是为什么在你的例子中，#a可以影响#b，但是#b不影响#a，因为#b是在#a之后

​

$(document).ready(function() {
    $(document).on('mouseenter mouseleave', '.plane1', function() {
    	$('.plane2').toggleClass('change');
    });
    $(document).on('mouseenter mouseleave', '.plane2', function() {
    	$('.plane1').toggleClass('change');
    });
});

.change {
    transform: scale(0.9); 
    opacity: 0.2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plane1" class="plane1 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That plane</h4>
</div>
<div id="plane2" class="plane2 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That other plane</h4>
</div>

​

3架飞机的最新情况

​

$(document).ready(function() {   
    $(document).on('mouseenter', '.plane1, .plane2, .plane3', function() {
        $(this).removeClass('change');
    	if($(this).hasClass('plane1')) {
        	$('.plane3').addClass('change');
            $('.plane2').addClass('change');
        }
        if($(this).hasClass('plane2')) {
        	$('.plane3').addClass('change');
            $('.plane1').addClass('change');
        }
        if($(this).hasClass('plane3')) {
        	$('.plane1').addClass('change');
            $('.plane2').addClass('change');
        }
    });
    
    $(document).on('mouseleave', '.plane1, .plane2, .plane3', function() {
        $('.plane1').removeClass('change');
        $('.plane2').removeClass('change');
        $('.plane3').removeClass('change');
    });
});

.change {
    transform: scale(0.9); 
    opacity: 0.2
}
div {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="plane1" class="plane1 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That plane</h4>
</div>
<div id="plane2" class="plane2 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That other plane</h4>
</div>
<div id="plane3" class="plane3 col-md-6 left scale-1 trans-6 opacity-7 hover-opacity">
    <img src="img/specs.jpg" class="img-thumbnail center" width="250" height="250"/>
    <h4 class="center">That plane 3</h4>
</div>

​

Answer 2

简单地说，以前没有兄弟姐妹选择器。

这里有一个使用jQuery的解决方案(它非常容易使用，并且拥有很好的文档)：

$('.plane').hover(function () { // what happens on hover
    $(this).siblings().css({
        transform: 'scale(0.9)',
        opacity: '0.2'
    });
}, function () { // what happens after hover
    $(this).siblings().css({
        transform: 'scale(1)',
        opacity: '1'
    });
});

演示

要使用它，只需将其包含在关闭script标记之前的一个标记中即可。在它之前添加对jQuery的引用。

• https://api.jquery.com/hover
• https://api.jquery.com/siblings

Answer 3

不幸的是，使用纯CSS无法完成您想要完成的任务。

您需要一个css选择器，该选择器可以选择前面的兄弟姐妹，而这个兄弟姐妹还不存在(目前还不存在)。见这里。

最好的选择是使用javascript (最好是jQuery)