Hover 2 divs同時

你好，我有一個列是一個按鈕，並試圖使它改變背景顏色和他的元素的顏色，但即時通訊在改變其中一個元素是從一個真棒字體，上面我離開我的代碼：Hover 2 divs同時

HTML：

CSS：

.col-xs-4.btn-dashboard:hover { 
    background-color: #35b34c; 
    color: white; 
} 

.col-xs-4.btn-dashboard.fa-wheelchair:hover{ 
    color:white; 
}

來源

2015-09-07 Mônica R.

這裏添加一個空格：'.COL-XS- 4.btn-dashboard .fa-wheelchair：hover' – martinczerwi

他改變圖標的顏色，但只有當我將鼠標懸停在圖標上，而不是在被包裹的元素中時（col-xs.btn ..） –

然後這個是合適的'.col-xs-4.btn-dashboard：hover .fa-wheelchair'，...哦，我剛剛看到有一個答案已經; – martinczerwi

變化.col-xs-4.btn-dashboard.fa-wheelchair:hover到.col-xs-4.btn-dashboard:hover .fa-wheelchair。

來源

2015-09-07 14:42:41 Nerdwood

感謝工作正常。 –

在側面說明。從選擇器中刪除類col-xs-4。如果您稍後決定要按鈕的大小不同，則會打破選擇器。 –

@MônicaR。很高興它的工作！我同意安德烈亞斯的觀點，'.col-xs-4'應該可以從選擇器中刪除。請確保您將任何答案標記爲正確，以幫助未來的人！ :) – Nerdwood

你需要在CSS類之間有一個空格，你應該把鼠標懸停在div上，所以圖標顯示爲白色，當鼠標懸停在div上時，而不僅僅是圖標上（我認爲這是你的意圖）。

.col-xs-4.btn-dashboard:hover { 
 
    background-color: #35b34c; 
 
    color: white; 
 
} 
 

 
.col-xs-4.btn-dashboard:hover .fa-wheelchair{ 
 
    color:white; 
 
}

<a href=""> 
 
<div class="col-xs-4 bordered-right btn-dashboard"> 
 
<p class=""><strong>TITLE</strong></p> 
 
    <h4><i class="fa fa-wheelchair">ICON</i></h4> 
 
     <p><small>Subt Title</small></p> 
 
</div> 
 
</a>

來源

2015-09-07 14:42:41

你的CSS選擇器鏈是錯誤的（缺少空間） - 嘗試 -

.COL-XS-4.btn儀表板.fa.fa輪椅

你的CSS正在尋找一個包含所有這些類的元素 - 而不是一個類的子元素。

來源

2015-09-07 14:43:47

您應該從您的CSS規則中刪除.col-xs-4和.fa-wheelchair。如果您決定使用.col-xs-3或其他.fa-something-else圖標，會發生什麼情況？每次進行此類更改時，您都必須更新CSS。我反而做：

.btn-dashboard:hover { 
    background-color: #35b34c; 
    color: white; 
} 

.btn-dashboard:hover h4 { 
    color: yellow; 
}

如果你只是想改變font-awesome圖標的顏色在h4你可以這樣做，而不是：

.btn-dashboard:hover h4 i { /* or i.fa */ 
    color: yellow; 
}

來源

2015-09-07 14:53:01 trashr0x

Hover 2 divs同時

回答

相關問題