CSS Beginner麻煩與懸停

Question

我一直在學習網頁設計以及開發相當長一段時間了，但我仍然難以接受CSS的一些基本規則。

我試圖弄清楚懸停一個元素時，懸停是如何工作的，以影響另一個元素。但我碰到一些意想不到的事情...

問：爲什麼元素.one在.two被徘徊的時候變黑？

下面是代碼和小提琴。

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> 

Answer 2

你必須改變你的html結構來實現這一點。 由於現在有第二類的div在div類中，因此兩個正在成爲第一類div的孩子，所以當你將鼠標懸停在第二類的div上時，它會自動考慮你正在使用第一類div。 使用絕對div並且不要使它成爲class div的子級。