將鼠標懸停在容器div上單獨突出顯示嵌套div

我在類.one（.one :hover）上放置了一個「懸停」功能，將background-color更改爲灰色。我期待它可以突出顯示div s（.two, .three），只要我將鼠標懸停在容器.one div上。將鼠標懸停在容器div上單獨突出顯示嵌套div

但是，它所做的只是將鼠標懸停在兩個嵌套的div（.two,.three）上。有人可以解釋爲什麼這是如此，我必須做什麼，使其突出整個div .one創建一個單一的實心灰色格？

下面是我使用的CSS。

.one { 
 
    width: 200px; 
 
    display: inline-block; 
 
} 
 

 
.two { 
 
    background-color: rgba(0, 51, 102, 1); 
 
    width: 50px; 
 
    height: 100px; 
 
    float: left; 
 
} 
 

 
.three { 
 
    background-color: rgba(0, 204, 204, 1); 
 
    width: 150px; 
 
    height: 100px; 
 
    float: right; 
 
} 
 

 
.one :hover { 
 
    background-color: rgba(153, 153, 153, 1); 
 
}

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

來源

2012-12-01 Biglu315

我覺得這個CSS將幫助您：

.one:hover .two, .one:hover .three { 
background-color: rgba(153,153,153,1);}

來源

2012-12-01 18:47:13 anders

感謝那絕對是編寫它的正確方法。我有一個關於css規則的確切語法的問題。當使用單數「.one：hover」選擇器時，在.one和：hover之間必須有一個空格。但是，當您使用多個選擇器編寫css規則時，.one和：hover之間不能有空格。這有什麼特別的理由嗎？它後來總是讓我頭痛，以瞭解爲什麼存在某些細微差別，而不是僅僅記住它們在那裏。 – Biglu315

聽起來很奇怪，你必須在選擇器和僞類之間添加一個空格。我從來不這樣做。如果你看看例如http://www.w3schools.com/css/css_pseudo_classes.asp它看起來不應該是一個空格。 – anders

將鼠標懸停在容器div上單獨突出顯示嵌套div

回答

相關問題