Hello All, I ma redesigning one of my websites and am having a little trouble with the drop-down navigation. Right now the code for one ofthe li elements is: li#accessories a span { background: url('/images/nav-bg.png'); background-position: -6px -6px; width: 86px; } Code (markup): However I need the background image to change when that is active so that the font is a different color. I have tried to use the following with no luck: li:active#accessories a span { background: url('/images/nav-bg-hover.png'); background-position: -6px -6px; width: 86px; } Code (markup): li#accessories:active a span { background: url('/images/nav-bg-hover.png'); background-position: -6px -6px; width: 86px; } Code (markup): li#accessories a:active span { background: url('/images/nav-bg-hover.png'); background-position: -6px -6px; width: 86px; } Code (markup): li#accessories a span:active { background: url('/images/nav-bg-hover.png'); background-position: -6px -6px; width: 86px; } Code (markup): As well when I use the CSS hover tag, as soon as I enter the drop-down itself the background reverts to the old one. Any ideas? Best Regards, Nick
They all work in Firefox and Chrome but only span:active works in Opera. Of course, none of them work in IE but that is well known. http://reference.sitepoint.com/css/pseudoclass-active The only other problem I can see is the forward slash in front of images. Is you images folder in the root? Who uses active class anyway? I never do. Just forget about it mate.
Thanks for the input, however it is a must have for the websites drop-down navigation as the menu is integrated with the tab. For instance I have a black background with light grey navigation text, however the drop-down menu is a darker to light grey fade (so I would need black text...). With that said, I tried all the above and the menu did not work at all once. It works when I use the hover tag, however when I switch the hover to active nothing happens. Any ideas why this is so? Best Regards, Nick
Do you have the active selector after the hover? In some browsers, it doesn't work if it's before hover. If all else fails, this jQuery method works. <html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> <script type="text/javascript"> $(document).ready( function() { $('li#accessories a span').mousedown( function() { $(this).css('background-image', 'url("images/nav-bg-active.png")'); }); $('li#accessories a span').mouseup( function() { $(this).css('background-image', 'url("images/nav-bg-hover.png")'); }); $('li#accessories a span').mouseover( function() { $(this).css('background-image', 'url("images/nav-bg-hover.png")'); }); $('li#accessories a span').mouseout( function() { $(this).css('background-image', 'url("images/nav-bg.png")'); }); }); </script> <style type='text/css'> ul { list-style: none; } li#accessories a span { background: url('images/nav-bg.png'); background-position: -6px -6px; width: 86px; } </style> </head> <body> <ul> <li id="accessories"><a href='#'><span>Something</span></a></li> </ul> </body> </html> Code (markup):