CSS 初学者遇到悬停问题

Question

我学习网页设计和开发已经有一段时间了，但我仍然对 CSS 的一些基本规则感到困惑。

我试图弄清楚 :hover 的行为如何在悬停一个元素时影响另一个元素。但是我遇到了一些意想不到的事情......

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

这是代码和 fiddle 。

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。事件“冒泡”到父元素......即使它在视觉上看起来不像那样。要将每个独立悬停，您必须从 .one 中取出 .two。您可能希望将两者都包装在一个容器中以正确设置它们的位置。 working jsFiddle

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