CSS Transitions in Classes with Pseudo Hover

Okay, so I can't figure out why this isn't working. The hover effect with the fade in doesn't seem to be applying to this.

css

.panel_button {

}


.panel_button a {
webkit-transition: all 10.0s ease; 
-moz-transition: all 10.0s ease; 
transition: all 10.0s e开发者_JS百科ase;
background-color: #000;
display: block;
width: 50%;
height: 160px;
color: #000099;
font-family: Arial, Helvetica, sans-serif;
}

.panel_button a:hover {
background: #808080;
color: #FFFFFF;
}

Header page

  <div class="panel_button" style="display: visible;"> <a href="#">BLOG</a> </div> 

The website where this code is implemented is at niu-niu.org

Thank you!

Your webkit-transition: all 10.0s ease; is missing the dash at the beginning. Change it to this:

-webkit-transition: all 10.0s ease;