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; } Link to comment https://forums.phpfreaks.com/topic/180978-solved-css-rollover-working-but-active-link-isnt/ 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. Link to comment https://forums.phpfreaks.com/topic/180978-solved-css-rollover-working-but-active-link-isnt/#findComment-954839 Share on other sites More sharing options...
Dorky Posted November 10, 2009 Share Posted November 10, 2009 a:focus Link to comment https://forums.phpfreaks.com/topic/180978-solved-css-rollover-working-but-active-link-isnt/#findComment-954866 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 Link to comment https://forums.phpfreaks.com/topic/180978-solved-css-rollover-working-but-active-link-isnt/#findComment-954869 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 Link to comment https://forums.phpfreaks.com/topic/180978-solved-css-rollover-working-but-active-link-isnt/#findComment-954897 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. Link to comment https://forums.phpfreaks.com/topic/180978-solved-css-rollover-working-but-active-link-isnt/#findComment-955351 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 Link to comment https://forums.phpfreaks.com/topic/180978-solved-css-rollover-working-but-active-link-isnt/#findComment-955596 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.