通过悬停其他 div 来影响 div

Question

我试图通过悬停另一个 div 来影响一个 div，并且我已经检查了 许多 这些问题已经在 Stackoverflow 上得到了回答，例如 this one 和 this one，我成功地做到了一种方式，其中#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; }

所以我尝试这样做的任何方式，它似乎都不起作用。 （是的，也尝试了~）

编辑；我的 HTML

<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>

我在这里要完成的工作的 GIF； http://i.imgur.com/s7atNDr.gif（太大无法上传）

Answer 1

您可以使用 jQuery 执行此操作，如下所示。仅使用 css 无法做到这一点，因为选择器只能看到悬停元素之后的元素，在这种情况下，您还需要 before。这就是为什么在你的例子中，#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

简单地说，there is no previous sibling selector。

这是一个使用 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'
    });
});

Demo

要使用它，只需将它包含在一个 script 标记中，就在您的 HTML 结束标记之前。在它之前添加对jQuery 的引用。

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

Answer 3

很遗憾，您想要完成的事情是纯 CSS 无法实现的。

您需要一个 CSS 选择器来选择前面不存在的同级（尚不存在）。见here。

最好的选择是使用 javascript（最好是 jQuery）

Answer 4

:hover 属性仅适用于另一个元素，如果它是被悬停元素的子元素。

<div class="plane1">
  <div class="plane2">
  </div>
</div>

.plane1:hover > plane2 {
  somestyle
}

Answer 5

这里使用了一点 javascript：https://jsfiddle.net/DIRTY_SMITH/6p5eLffv/

HTML

<div id="div1" class="normal" onmouseover="change()" onmouseout="changeBack()"></div>
<div id="div2"></div>

CSS

#div1, #div2{width: 50%; height: 200px; float: left;}
#div1{background-color: red;}
#div2{background-color: blue;}
#div2.normal{background-color: blue;}
#div2.active{background-color: green;}

javascript

function change(){
    document.getElementById("div2").className='active';
    }
function changeBack(){
    document.getElementById("div2").className='normal';
    }

Answer 6

唯一可行的纯 CSS 解决方案是使用嵌套的、绝对定位的元素：

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

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

和下面的css一起

    #plane1:hover > #plane2 {
        /* You may add your :hover styles here */
    }

但是，我绝不会推荐这样的标记，而是建议使用 JavaScript（jQuery 对这个来说太过分了）。请注意，此标记不允许轻松扩展，并且可能仅适用于少数 div。