CSS active selector

Discussion in 'CSS' started by Borduhh, May 21, 2011.

  1. #1
    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
     
    Borduhh, May 21, 2011 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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. :)
     
    Cash Nebula, May 22, 2011 IP
  3. Borduhh

    Borduhh Well-Known Member

    Messages:
    767
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    150
    #3
    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
     
    Borduhh, May 23, 2011 IP
  4. Borduhh

    Borduhh Well-Known Member

    Messages:
    767
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    150
    #4
    Hello,

    Do you think there would be a different tag to use besides active?

    Best Regards,
    Nick
     
    Borduhh, May 23, 2011 IP
  5. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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. :cool:
    
    <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):
     
    Cash Nebula, May 23, 2011 IP