Question

让我们说我必须得到名为＆＃34; A＆＃34;和＆＃34; B＆＃34;分别。

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

div A的z-index为1，宽度和高度为100％。 div B的z-index为2，宽度和高度为50％，顶部和左边为25％;

#A{
    position:absolute;
    width:100%
    height:100%;
    top:0%;
    left:0%;
    z-index:1;

    background-color:black;
}

#B{
    position:absolute;
    width:50%;
    height:50%;
    left:25%;
    top:25%;
    z-index:2;

    background-color:gray
}

如果你同时将鼠标悬停在Div A和Div B上，Div A仍会注册为悬停。在这个假设的场景中，每当我将鼠标悬停在Div A上时，我希望Div A转为Red，而Div B转为灰色，每当我将鼠标悬停在Div B上时，我希望Div B为蓝色而Div A为黑色。我怎样才能做到这一点？ 如果有可用的话，我更喜欢CSS答案。

我认为使用#A:not(hover){}会起作用，但是当我尝试它时，它失败了。

Answer 1

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

将鼠标悬停在A左右A红色和B灰色
将鼠标悬停在B左右B蓝色和A红色

#A {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  z-index: 1;
  background-color: black;
}

#A:hover {
  background: red;
}

#B {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
  z-index: 2;
  background-color: grey;
}

#B:hover {
  background: blue;
}

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

但是，如果你真的做希望阻止<div> #A在<div> #B被徘徊时停留，你可以使用兄弟元素，如 this answer 中所述。

希望这有帮助！：）

Answer 2

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

Css的一部分：

#A:hover  {
    background-color: red;
}

#B:hover {
    background-color: blue;
}

jQuery的一部分：

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

＆＃13;

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

＆＃13;

#A {
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    z-index:1;
    background-color:black;
    border: 1px solid;
}

#B {
    position:absolute;
    width:50%;
    height:50%;
    left:25%;
    top:25%;
    z-index:2;
    border: 1px solid;
    background-color: gray;
} 

#A:hover  {
    background-color: red;
}

#B:hover {
    background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="A">
    <div id="B">
    </div>
</div>

＆＃13;

Answer 3

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

$(document).ready(function(){

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

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

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

});

JQuery允许您在给定动作的情况下设置多个元素的样式

Answer 4

我使用Obsidian Age答案中的链接找到了一种纯粹的CSS方式：

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

http://jsfiddle.net/k3Zdt/248/

我所要做的就是从Div A中取出Div B并删除z-index。

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

4 个答案: