按鈕懸停

Question

ASP.net CSS的錯誤，我有這個按鈕 <button type="submit" id="wow"> <i class="fa fa-lock"></i> Log In </button>

我想在登錄按鈕輸入字體真棒圖標。 CSS代碼是這樣的：

#wow{ 
    padding-top:10px; 
    background-color:red; 
    border:none; 
    float: left; 

    color:#333333; 
    width: 120px; 
    height:120px; 
} 

和：懸停眼前這個

#wow :hover { 
     background-color: green; 

    } 

這是在正常狀態下的按鈕。

這是按鈕盤旋。

它改變了背景只有圖標...

任何建議，以解決這一問題？

Answer 1

您需要刪除#wow和:hover之間的空格。目前您的懸停將被應用到按鈕後代#wow之間

#wow { 
 
    padding-top: 10px; 
 
    background-color: red; 
 
    border: none; 
 
    float: left; 
 
    color: #333333; 
 
    width: 120px; 
 
    height: 120px; 
 
} 
 
#wow:hover { 
 
    background-color: green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<button type="submit" id="wow"> 
 
    <i class="fa fa-lock"></i> Log In 
 
</button>