I am using CSS to make rollover images for site navigation, by using fused images. The rollover works perfectly, but I would like to have a third image state to kick on when the user clicks the button. What do I put in my style if I want to do this?
Here's an example:
/* MAIN NAVIGATION BUTTON: HOME */
a.mainlinks_home {
background: url(<!-- m --><a class="postlink" href="http://www.fgcomics.com/images/layout/blue/home_blue.gif">http://www.fgcomics.com/images/layout/b ... e_blue.gif</a><!-- m -->) 0 0 no-repeat;
display: block;
width: 130px;
height: 25px;
text-decoration: none;
}
a.mainlinks_home:hover {
background-position: -130px 0;
display: block;
width: 130px;
height: 25px;
text-decoration: none;
}try a:activeThanks, it worked! I'd love to follow up with the question posed here. I too am trying to have the CSS style change when the user clicks on a CSS style-enabled button/list item. I tried "active", but that only seems to change the color (or style) while clicking the list item. When the click is done (the mouse button is released), the list item goes back to its other state. If I click the list item and drag the mouse outside of the list item, then it will stay.
I suppose my question is: is there a CSS setting for "offclick" os something of that nature?
Thanks!Try visited, assuming the element is an anchor tag.
Here's an example:
/* MAIN NAVIGATION BUTTON: HOME */
a.mainlinks_home {
background: url(<!-- m --><a class="postlink" href="http://www.fgcomics.com/images/layout/blue/home_blue.gif">http://www.fgcomics.com/images/layout/b ... e_blue.gif</a><!-- m -->) 0 0 no-repeat;
display: block;
width: 130px;
height: 25px;
text-decoration: none;
}
a.mainlinks_home:hover {
background-position: -130px 0;
display: block;
width: 130px;
height: 25px;
text-decoration: none;
}try a:activeThanks, it worked! I'd love to follow up with the question posed here. I too am trying to have the CSS style change when the user clicks on a CSS style-enabled button/list item. I tried "active", but that only seems to change the color (or style) while clicking the list item. When the click is done (the mouse button is released), the list item goes back to its other state. If I click the list item and drag the mouse outside of the list item, then it will stay.
I suppose my question is: is there a CSS setting for "offclick" os something of that nature?
Thanks!Try visited, assuming the element is an anchor tag.