CSS：悬停在其他元素上？

简短问题：

.b

的

背景色为什么在我悬停时不改变<代码>.a

CSS

.a{
颜色：红色；
}
.b{
颜色：橙色；
}
悬停{
背景颜色：蓝色；
}

HTML

<div id="wrap">
    <div class="a">AAAA</div>
    <div class ="b">BBBB</div>
</div>

AAAA
BBBB

---

因为.b不是.a的子对象，所以选择器找不到任何东西。使用javascript执行您想在那里执行的操作。

当不同元素上发生事件时，您不应该更改同级的样式。它脱离了CSS的上下文

使用JavaScript实现这一点，例如：

var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
    bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
    bDiv.style.backgroundColor = "white";
};

---

您不能执行类似于

a:hover+b

的操作吗？请参见您需要使用

.a:hover+.b

而不是

.a:hover.b

.a:hover.b

适用于以下结构

<div class="a">AAAA
  <div class ="b">BBBB</div>
</div>

AAAA
BBBB

如果在某个点上需要在.a和.b之间有一些元素，则需要使用

.a:hover~.b

，它适用于紧随其后的

.a

的所有同级，而不仅仅是下一个同级

演示

您可以使用+选择器

.a:悬停+.b{
背景颜色：蓝色；
}

为同级元素应用css，或

.a:hover>.b{
背景颜色：蓝色；
}

---

对于嵌套类。

您可以做两件事

或者将HTML更改为使

.b

成为

.a

<div id="wrap">
    <div class="a">AAAA
       <div class ="b">BBBB</div>        
    </div>
</div>

---

不需要js

试着理解这个例子：
html代码

<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>

将鼠标悬停在1上，3将被设置样式

1.
2.
3.

#一：悬停~#三{
背景色：黑色；
颜色：白色；
}
.盒子{
光标：指针；
显示：内联块；
高度：30px；
线高：30px；
保证金：5px；
外形：1px纯黑；
文本对齐：居中；
宽度：30px；
}

---

当您将鼠标悬停在框1上时，框3将变为黑色

Jquery是一个很好且简单的解决方案：

html:

<div class="a">AAA</div>
<div class="b">BBB</div>

AAA
BBB

脚本： 如果需要，请将此脚本放入html中。就这些

<script>
      $(".a").mouseover(function(){
        $(".b").css("color", "blue"); 
      });
      $(".a").mouseleave(function(){
        $(".b").css("color", "red");
      });
</script>

$（“.a”）.mouseover（函数（）{
$（“.b”）.css（“颜色”、“蓝色”）；
});
$（“.a”）.mouseleave（函数（）{
$（“.b”）.css（“颜色”、“红色”）；
});

要让你的CSS代码正常工作，第二个div应该嵌入第一个div中。

.b

必须是

的孩子。a

要让它正常工作，你可以使用同级选择器

。a:hover+.b

或

。a:hover~.b

我不知道为什么会被提升为@Ana所说的是真的

<script>
      $(".a").mouseover(function(){
        $(".b").css("color", "blue"); 
      });
      $(".a").mouseleave(function(){
        $(".b").css("color", "red");
      });
</script>