css - CSS 初学者的悬停问题

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;
}

这是我的 jsFiddle

帮助任何人？

Answer 1

该元素.two位于.one元素内部。所以悬停.two意味着你也在悬停.one。事件“冒泡”到父元素..即使它在视觉上看起来不像。要独立悬停每一个，您必须.two从.one. 您可能希望将两者都包装在一个容器中以正确设置它们的位置。工作的jsFiddle

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

Answer 2

你必须改变你的 html 结构来实现这一点。由于现在具有二类的 div 在 div 类 1 内，所以两个成为类 div 的子类，所以当您将鼠标悬停在具有类 2 的 div 上时，它会自动认为您也在类 1 div 上徘徊。使用绝对 div，不要让它成为第一类 div 的子级。