Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

    Changing the css on elements

    I'm having trouble setting the css values (background-color and color) on elements via the .css() jQuery function.

    I've got a pretty simple menu (no submenuing, just a few items) and I am loading a div based on which menu item is clicked. The css for the page contains a hover setting so each item lights up as it is hovered:

    Code:
    #leftbar ul li a:hover {
    	color:#EAEAEA;
    	background-color:#0867C3;
    	border: 1px solid #ccf;
    }
    And then when an item is clicked, and the div loaded, I change that item's properties via jQuery, but first I change all of the menu items back to the default setting as a means of reverting the last item clicked back to default.

    But doing this clobbers the original hover setting shown above! So, I've tried using the jQuery selector $('#leftbar ul li a:hover'), but that doesn't work.

    Code:
    	$('#leftbar ul li a').click(function() {
    		$('#leftbar ul li a').css({'background-color':'#171717', 'color':'#EAEAEA'});
    		$('#leftbar ul li a:hover').css({'background-color':'#0867C3', 'color':'#EAEAEA'});
    		$(this).css({'background-color':'#aaaaff', 'color':'#000000'});
    		$('#rightbar').load('servicecontent.htm .' + $(this).attr('title'), function() {
    			$(this).hide();
    			$(this).fadeIn('fast');
    		});
    	});
    Maybe there's a better way to do this?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,607
    Thanks
    6
    Thanked 997 Times in 970 Posts
    OK, first thing you should do is separate content, style, and functionality. This means: Don’t write CSS into the HTML code as inline styles, don’t write inline JS in the HTML, and don’t apply CSS through JavaScript. Rather, you should apply a certain class to the HTML through JS and then style the dynamic content in the stylesheet. This keeps things where they belong and makes debugging a lot easier.

    Secondly: I may be wrong but I don’t remember there being a :hover selector in jQuery. I think that’s what the hover() function is there for:
    Code:
    $('#leftbar ul li a').hover(function() {
    	$(this).addClass('hover');
    },
    function() {
    	$(this).removeClass('hover');
    });
    The advantage of setting a class and styling through CSS is that you don’t mess with specificity and can use the !important rule in the stylesheet if necessary:
    Code:
    #leftbar ul li a.hover {
    	background-color: #0867C3 !important;
    	color: #EAEAEA;
    }

  • Users who have thanked VIPStephan for this post:

    Fumigator (03-30-2010)

  • #3
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Yeah I hear you...

    I'm trying something new-- content loading via Ajax. This means When I click a menu item the page doesn't reload, but I want styles to change. The only way I can see how to do this is by using jQuery to change the css. I should probably use the addClass() function though (and thus keep css out of the js), but this still doesn't resolve the loss of the hover style. It's a grey area because yes the css hover is a style, but it's also functionality.

    So after the initial page load, where the css property a:hover works, has been reset via jQuery, I then have to use the hover() function? That's annoying.

  • #4
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    Freakin sweet. You steered me in a direction that led me to the solution! I did have to use the !important on the class I added because a class css definition is overridden by an element definition (of #id ul li a anyway) but once I did that, I simply used removeClass() then an addClass() on the clicked link and it now works _perfectly_. In FF anyway Oh hey I just tested IE and it works there too!

    I'm happy, THANKS!

    (and yes I will make the pages work without Javascript enabled)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •