Forums

mikes

I am using a sprite to create a rollover button that I can display text on. It works just fine when the page loads.When I mouse over the button, it changes the background position just like it should but the text disappears.

Here is my css:


A.button, A.button:LINK, A.button:VISITED, A.button:ACTIVE,  {
  float: left;
  display: block;
  background: transparent url(images/button.gif) no-repeat 0px 0px;
  overflow: hidden;
  height: 25px;
  width: 127px;
  margin-right: 8px;
  line-height: 29px;
  text-align: center;
  text-decoration: none;
}
A.button:HOVER {
  background-position: 0px -25px;
}

and I am calling it like this:


<a href=\"/\" class=\"button\">Press Me</a>

I could create an image with the text embedded in the image but I want a generic button that I can reuse.

What am I missing here?

mikes

I'm such a dork!

By default I have:


A { color: 000000; }
A:hover { color: ffffff; }

Of course my black text on a white button was 'disappearing' on rollover.
Geez, what a noob! :oops:

treehouse : what would you like to learn today?

Forums

Text on sprite button disappears on rollover