Html 通过悬停其他div来影响div

我试图通过悬停另一个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; }

所以不管我怎么做，它似乎都不起作用。（是的，还尝试了

~

）

编辑；我的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>

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

那架飞机
另一架飞机

这是我在这里努力实现的目标； （太大无法上传）

简单地说

下面是一个使用jQuery的解决方案（它非常容易使用，并且有很棒的文档）：

要使用它，只需在关闭HTML标记之前将其包含在

脚本
标记中即可。在其前面添加对的引用




简单地说

下面是一个使用jQuery的解决方案（它非常容易使用，并且有很棒的文档）：


要使用它，只需在关闭HTML标记之前将其包含在
脚本
标记中即可。在其前面添加对的引用




如果：hover属性是被悬停元素的子元素，则该属性仅适用于另一个元素

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

.plane1:hover > plane2 {
  somestyle
}


.plane1：悬停>plane2{
某种风格
}
仅当另一个元素是被悬停元素的子元素时：hover属性才适用于该元素

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

.plane1:hover > plane2 {
  somestyle
}


.plane1：悬停>plane2{
某种风格
}
不幸的是，纯CSS无法实现您想要实现的目标

您需要一个css选择器来选择前面的兄弟姐妹，而这个兄弟姐妹目前还不存在。看

您最好的选择是使用javascript（最好是jQuery）
不幸的是，您想要用纯CSS实现的目标是不可能的

您需要一个css选择器来选择前面的兄弟姐妹，而这个兄弟姐妹目前还不存在。看

最好的选择是使用javascript（最好是jQuery）
唯一有效的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>

然而，我从不推荐这样的标记，而是建议使用JavaScript（jQuery对于这一点来说太过分了）。请注意，此标记不允许轻松扩展，可能只适用于少数div。
唯一有效的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>

然而，我从不推荐这样的标记，而是建议使用JavaScript（jQuery对于这一点来说太过分了）。请注意，此标记不允许轻松扩展，可能只适用于少数div。
这里它使用了一些javascript：

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>

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

javascript

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

这里使用了一点javascript：

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>

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

javascript

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

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


$（文档）.ready（函数（）{
$（document）.on（'mouseenter mouseleave'，'.plane1'，function（）{
$（'.plane2'）.toggleClass（'change'）；
});
$（document）.on（'mouseenter mouseleave'，'.plane2'，function（）{
$（'.plane1'）.toggleClass（'change'）；
});
});
.change{
变换：比例（0.9）；
不透明度：0.2
}

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


$（文档）.ready（函数（）{
$（document）.on（'mouseenter mouseleave'，'.plane1'，function（）{
$（'.plane2'）.toggleClass（'change'）；
});
$（document）.on（'mouseenter mouseleave'，'.plane2'，function（）{
$（'.plane1'）.toggleClass（'change'）；
});
});
.change{
变换：比例（0.9）；
不透明度：0.2
}

那架飞机
另一架飞机
您可以尝试使用嵌套的
position:absolute
元素。是否只允许使用css解决方案？或者jquery是一种选择？@indubitablee我对jquery一无所知，所以在这种情况下我会很无助-CSS是最好的，但是如果jquery是唯一的方法，那么当然。问题是，CSS是级联的，所以你不能用CSS影响早期的元素。Flexbox是一种解决方案，但您会发现最好的解决方案是JQuery。您正在混合使用
H3
和
h4
标记。您可以尝试使用嵌套的
position:absolute
元素。是否只允许使用css解决方案？或者jquery是一种选择？@indubitablee我对jquery一无所知，所以在这种情况下我会很无助-CSS是最好的，但是如果jquery是唯一的方法，那么当然。问题是，CSS是级联的，所以你不能用CSS影响早期的元素。Flexbox是一种解决方案，但您会发现最好的解决方案是JQuery。您正在混合使用
H3
和
h4
标记。如评论中所述，我不知道该如何处理此代码-我也只是通过添加“背景色黄色”来演示，我确实在尝试添加
变换：比例（0.9）；不透明度：0.2
-我也不知道在哪里插入这个，以及是否需要任何标签