Question

Refer to this fiddle Please.
What I am trying to do is on hovering on a-tag inside #menu ul li, the background-color color of #header-bottom must also changed as of similar to background-color of the a-tag.
How can I achieve this?

UPDATE
Done this with CSS only yippie! 🙂 Here is the fiddle

Answer 1

Here is a jQuery method (sorry too much effort to make this javascript only for me). It could be translated though.

http://jsfiddle.net/PCbVs/9/

$('.menu').hover(

function() {
    var color = $(this).css('borderLeftColor');
    console.log(color);
    $('#header-bottom').css('backgroundColor', color);
}, function() {

});​

Or with jQuery UI animated style transitions.

http://jsfiddle.net/PCbVs/10/

$('.menu').hover(

function() {
    var color = $(this).css('borderLeftColor');
    console.log(color);
    $('#header-bottom').stop().animate({ backgroundColor: color }, 500);
}, function() {

});​