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

简单地说，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

要使用此功能，只需将其包含在结束HTML标记之前的script标记中即可。在它之前添加对jQuery的引用。

Answer 2

你可以用jQuery做到这一点，如下所示。只有css才能做到这一点，因为选择器只能看到悬停元素之后的元素，在这种情况下，你之前也需要它。这就是为什么在您的示例中，#a会影响#b但#b不会影响#a - 因为#b位于#a

之后

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新3个平面

＆＃13;

$(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');
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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。

通过悬停其他div来影响div

6 个答案: