Setting css styles using jQuery

Question

I need to set the css styles to the following elements as follows using jQuery

#hdr-nav-wrapper ul li:hover a{ 
    background-color:#0294ca;
}

 #hdr-nav-wrapper ul a:hover{ 
   background-color:#00aeff;
}

Except that the actual color will have to be dynamic based on whatever the background color of a div with id of "TestDiv". This site has a theme engine where users can change colors using a color theme palette. I am appending a nav bar to the top of the site but I want to have the background of the nav bar as the same as whatever "TestDiv" currently has.

How do I convert the above css to jQuery with that dynamic logic?

possible duplicate of jQuery css() function changing 'a' property not 'a:hover' property — MonkeyZeus
– MonkeyZeus, Commented Oct 1, 2013 at 20:18

BumbleB2na · Accepted Answer · 2013-10-01 20:28:12Z

3

Use jQuery .hover() and .css(). To make the swapping of the background color easier, wrap your <a> tag in a "display-block" element that can match the dimensions of the <li>. You will only need to add/remove background color on the new wrapper element (otherwise, you would have to save the old background color in a state to revert back to on mouseout)..

Here is a demo in jsfiddle.

HTML:

<ul>
    <li><div><a>test</a></div></li>
    <li><div><a>test</a></div></li>
</ul>
<div id="TestDiv" style="background-color:blue;">&nbsp;</div>

CSS:

li {
    background-color: orange;
}

jQuery:

$('ul li').hover(function() { 
    var $el = $(this).find('div');
    if($el.length > 0) {
        $el.css('background-color', $('#TestDiv').css('background-color'));
    }
}, function() {
    var $el = $(this).find('div');
    if($el.length > 0)
        $el.css('background-color','');
});

edited Oct 1, 2013 at 20:28

answered Oct 1, 2013 at 20:17

BumbleB2na

10.8k6 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BumbleB2na Over a year ago

I may have had a slightly different idea of what you want to achieve. Are you sure you want to change the <a> background and not the <li>?

Athapali Over a year ago

it was actually <li>. Thanks for your help!

Collectives™ on Stack Overflow

Setting css styles using jQuery

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related