spikypunker Posted November 10, 2009 Share Posted November 10, 2009 Hey guys, i've got this rollover working but the client wants it to stay "down" when on the page they are currently on, this should work???? a.rollover { display: block; width: 98px; height: 20px; text-decoration: none; background: url("images/button.gif"); padding-top:5px; } a.rollover:hover { background-position: -98px 0; } a.rollover:active { background-position: -98px 0; } Quote Link to comment Share on other sites More sharing options...
cags Posted November 10, 2009 Share Posted November 10, 2009 Not sure it'll help, but last time I got infuriated with anchor links was because I hadn't changed 'visited' and the link had been clicked before. Quote Link to comment Share on other sites More sharing options...
Dorky Posted November 10, 2009 Share Posted November 10, 2009 a:focus Quote Link to comment Share on other sites More sharing options...
gevans Posted November 10, 2009 Share Posted November 10, 2009 Take a look here; http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes Quote Link to comment Share on other sites More sharing options...
Dorky Posted November 10, 2009 Share Posted November 10, 2009 http://www.w3schools.com/CSS/css_pseudo_classes.asp Quote Link to comment Share on other sites More sharing options...
haku Posted November 11, 2009 Share Posted November 11, 2009 :active has no relation to the current page. It only refers to the state where the button has been clicked, before the page has reloaded to the target of the link. If you want it to be active on the page you are viewing, you can do it like this. First, give an ID to the body on each page. For example, if you have these pages: * index * about us * contact Then you would give the three body tags on those pages the following IDs: <body id="index"> <body id="about_us"> <body id="contact"> So if you have your navigation like this: <ul id="navigation"> <li><a class="index" href="index.html">Index</a></li> <li><a class="about_us" href="about_us.html">About Us</a></li> <li><a class="contact" href="contact.html">Contact</a></li> </ul> Then you can set up your CSS like this: #navigation a { color:blue; } #navigation a:hover { color:red; } #index .index, #about_us .about_us, #contact .contact { color:green; } #index .index:hover, #about_us .about_us:hover, #contact .contact:hover { color:white; } This will give the links a blue color with a red rollover, and on the active pages the link will be green with a white rollover. Quote Link to comment Share on other sites More sharing options...
spikypunker Posted November 11, 2009 Author Share Posted November 11, 2009 Ok i think i was over complicating a simple problem, all i've done to fix it is duplicate the link rule and then add an ON to the name, then changed this on each page, i only have 5 pages so it wasnt needed to overthink it Thanks for your help! a.rollover { display: block; width: 98px; height: 20px; text-decoration: none; background: url("images/button.gif"); padding-top:5px; } a.rolloverON { display: block; width: 98px; height: 20px; text-decoration: none; background: url("images/button.gif"); padding-top:5px; background-position: -98px 0; } a.rollover:hover { background-position: -98px 0; } a.rollover:active { background-position: -98px 0; } Simple as that, then obviously on each page i changed which button used the new rolloverON class, simples Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.