CODEWITHSUNDEEP
cssbuttonhover
getaway
getaway

Reputation: 8990

How can I change a button's color on hover?

I need to change the color of a button on hover.

Here is my solution, but it doesn't work.

a.button {
   display: -moz-inline-stack;
   display: inline-block;
   width: 391px;
   height: 62px;
   background: url("img/btncolor.png") no-repeat;
   line-height: 62px;
   vertical-align: text-middle;
   text-align: center;
   color: #ebe6eb;
   font-family: Zenhei;
   font-size: 39px;
   font-weight: normal;
   font-style: normal;
   text-shadow: #222222 1px 1px 0;
}
a.button a:hover{
     background: #383;
}

Upvotes: 28

Views: 245891

Answers (3)

BrunoLM
BrunoLM

Reputation: 100331

Seems your selector is wrong, try using:

a.button:hover {
     background: #383;
}

This will look for the :hover on an a element with the button class, e.g:

<a class="button">Hover on me!</a>

Instead of your code:

a.button a:hover

Which means it is going to search for the :hover of an a element inside a with class="button", e.g:

<a class="button">
  <a>Hover on me!</a>
</a>

Upvotes: 22

Penh
Penh

Reputation: 41

a.button:hover{
    background: #383;  }

works for me but in my case

#buttonClick:hover {
background-color:green;  }

Upvotes: 3

Matchu
Matchu

Reputation: 85792

a.button a:hover means "a link that's being hovered over that is a child of a link with the class button".

Go instead for a.button:hover.

Upvotes: 52

Related Questions