Problem mit a:hover in Klasse

[burn4ever]

Hallo ich habe folgendes code-snippet:

<style>
.button
{
   display:block;
   font-size:14px;
   font-family:Trebuchet MS,sans-serif;
   text-decoration: none;
   color:#000000;
   width:120px;
   height:30px;
   background-color:#FFFFFF;
   border:1px;
   border-style:solid;
   border-color:#000000;
   padding-top: 10px;
   margin:20px auto;
   text-align: center;
}

 
.button a:hover {    
   color:#ffffff;
   background-color:#ce0d0d;
}

</style>


<a href="#" class="button" >VIEW HERE</a>

Ein ganz simpler Button soll es werden aber irgendwie funktioniert der hover nicht, sprich es passiert gar nichts.
Sobald ich die Klasse :button vor dem a:hover entferne funktioniert der hover aber ich möchte diesen hover nur auf die Klasse .button anwenden, also so wie ich es eigentlich oben geschrieben habe.

Hat jemand eine Idee warum der hover nicht funktioniert?

 

[Tar]

.button a:hover spricht ein <a> an, welches in einem Element mit der Klasse button liegt. Dein <a> hat allerdings die Klasse button, deswegen greift der Selektor dort nicht. .button:hover sollte reichen.