按钮悬停

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>