CSS：悬停在具有不同z索引的div上

假设我必须分别命名为“A”和“B”的div

<div id="A">
    <div id="B">
    </div>
</div>

如果同时将鼠标悬停在Div A和Div B上，则Div A仍将注册为正在悬停。在这个假设的场景中，每当我悬停在Div A上时，我希望Div A变成红色，Div B变成灰色，每当我悬停在Div B上时，我希望Div B变成蓝色，Div A变成黑色。我该怎么做如果有可用的CSS答案，我更喜欢。

---

我认为使用

#A:not（hover）{}

会起作用，但当我尝试时，它失败了。

您的假设情况已经以您想要的方式存在：

• 将鼠标悬停在

  A

  上会使

  A

  变为红色，而

  B

  变为灰色
• 将鼠标悬停在

  B

  上会使

  B

  变为蓝色和

  A

  变为红色

#A{
位置：绝对位置；
宽度：100%；
身高：100%；
最高：0%；
左：0%；
z指数：1；
背景色：黑色；
}
#A:悬停{
背景：红色；
}
#B{
位置：绝对位置；
宽度：50%；
身高：50%；
左：25%；
最高：25%；
z指数：2；
背景颜色：灰色；
}
#B:悬停{
背景：蓝色；
}

---

你不能使用纯css，你必须帮助jquery：

Css的一部分：

jQuery的一部分：

$（文档）.ready（函数（）{
$（'#B'）。悬停（函数（）{
$（'A'）.css（'background-color'，'black'）；
}，函数（）{
$（'A'）.css（'background-color'，'red'）；
})
})

#A{
位置：绝对位置；
宽度：100%；
身高：100%；
最高：0%；
左：0%；
z指数：1；
背景色：黑色；
边框：1px实心；
}
#B{
位置：绝对位置；
宽度：50%；
身高：50%；
左：25%；
最高：25%；
z指数：2；
边框：1px实心；
背景颜色：灰色；
} 
#A:悬停{
背景色：红色；
}
#B:悬停{
背景颜色：蓝色；
}

---

您无法实现CSS的目标。悬停功能仅允许您更改该元素的属性。我建议使用JQuery

$(document).ready(function(){

    $("#A").hover(function(){

        $("#A").css("background-color", "red");
        $("#B").css("background-color", "gray");

    });
    /* Continue writing other hover functions */

});

---

JQuery允许您为给定动作的多个元素设置样式

我使用黑曜石时代的答案中的链接找到了一种纯css方式：

<div id="ContainerDiv">
    <div id="A"></div>
    <div id="B"></div>
</div>

---

我所要做的就是将Div B从Div A中取出并删除z索引。

Div A在您悬停在Div B上时不会变回黑色。：/您说：“我悬停在Div B上，我希望Div B为蓝色，Div A为红色。”。我修好了。它变黑了，但不会再变红了。“我希望这是一项永久性的活动。”布拉德利·威廉姆亚梅尔科，再试一次！我如何使用您在本例中链接我的答案？你能用C区给我看看吗？我也打错了。当你在B区上空盘旋时，A区应该变成黑色。谢谢你发给我的链接。你帮我解决了这个问题！没问题；我知道它涉及一个兄弟元素，但无法让它在您的特定情况下工作。我假设

z-索引

在某种程度上相互冲突。很高兴听到你把它整理好了：）你说的是当“A”没有悬停的时候做这个。这与您试图实现的目标无关您是否使用过JQuery？是的，但我不想在我的项目中再使用外部脚本。为什么不？使用JQuery CDN，因此不会占用空间。听着，你的问题只能用JQuery解决，CSS根本没有能力我找到了CSS的答案！！过来看。

$('#B').hover(function(){
     $('#A').css('background-color','black');
},function(){
     $('#A').css('background-color','red');
})

$(document).ready(function(){

    $("#A").hover(function(){

        $("#A").css("background-color", "red");
        $("#B").css("background-color", "gray");

    });
    /* Continue writing other hover functions */

});

<div id="ContainerDiv">
    <div id="A"></div>
    <div id="B"></div>
</div>