Question

我一直在学习网页设计和开发很长一段时间，但我仍然对CSS的一些基本规则感到困惑。

我正在试图弄清楚：悬停一个元素时hover的行为如何影响另一个元素。但我偶然发现了一些......

问：为什么当.two悬停时，元素.one会变黑？

这是代码和小提琴。

HTML：

<div class="one">

    <div class="two"></div>    

</div>

CSS：

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top:0;
}

.one {
    left:0;
    background: red;
    border: 5px solid black;
}

.two {
    left:200px;
    background: yellow;
}

.one:hover {
    background: black;
}

here is my jsFiddle

帮助任何人？

Answer 1

元素.two位于.one元素内。所以悬停.two意味着您也在徘徊.one。事件“冒泡”到父元素..即使它看起来不像那样。要单独悬停每个人，您必须从.two中取出.one。您可能希望将两者都包装在容器中以正确设置其定位。 working jsFiddle

<div class="someContainer">    
    <div class="one"></div>   
    <div class="two"></div>
</div>

Answer 2

您必须更改html结构才能实现此目的。现在正在使用第二类的div在div类中，所以两个正在成为第一类div的孩子，所以当你在具有第二类的div上盘旋时，它自动认为你也在上一级div。使用绝对div并且不要使它成为class one div的孩子。

CSS初学者在悬停时遇到麻烦

2 个答案: