2016-10-02 3 views
0

Ich habe diese Taste <button type="submit" id="wow"> <i class="fa fa-lock"></i> Log In </button>ASP.net CSS Fehler auf die Schaltfläche schweben

Ich versuche, eine Schrift Super Icon auf der Login-Taste. der CSS-Code ist dies:

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

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

und für: schweben gerade diese

#wow :hover { 
     background-color: green; 

    } 

Dies ist die Taste im normalen Zustand. image1

Dies ist die Schaltfläche Hover. image2

es nur den Hintergrund des Symbols ändert ...

jede Anregung dieses Problem beheben?

+0

entfernen Raum zwischen #WoW den Tasten Nachkommen angewendet werden: schweben –

Antwort

2

Sie müssen den Abstand zwischen #wow und :hover entfernen. Zur Zeit wird Ihr schweben

#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>