CSS Sprite --active button not working

HTML & CSS
1

Hi

I have created three button images that have been placed into one file, which I’m using for a CSS Sprite.

Here is my HTML:

<li><a href="myths.html" id="myths"><img src="images/myths.jpg" alt="logo" width="113" height="43" /></a></li>

On the MAIN page I have two buttons setup that are HOME and MYTHS.

Here is my CSS:

#myths {
background: url(../images/sprite_2.png) no-repeat;
width: 115px;
height:43px;
display: block;
text-indent: -9999px;
}

#myths:hover
{ background-position: 0 -80px;
}

#myths:active {
background-position: 0 -30px;
}

When I place the cursor over the MYTHS button I achieve the hover effect, yet when I click on the MYTHS button to go to the Myth page, the MYTHS button is not active, indicating that this the selected page you are on.

Any timely suggestions to resolve this situation would be greatly appreciated.

sahstr

2

That’s not what :active means. The :active state is just when you are actually clicking on the element (say, when you are holding down your mouse).

To have a link highlighted on a specific page, you can use classes. Here are some ways you can do that: How to adjust color of Active Page in CSS?

3

or while the element has the focus and the ENTER key is pressed

In the situation Ralph gave :hover would also apply while for the enter key :focus would also apply.

You can’t have :active without also having one of :hover and :focus