[Solved] Background color change on hover

[GreyFox135]

Hi everyone,

Quick question. Is there a way to change the background color of a list item when it is hovered over?

I’ve been using this:

Code:

$(“#navigation li a”).hover(function() {
$(this).animate({“background” : “yellow”});
}, function() {
$(this).animate({“background-color” : “green”});
});

I want to do a fadeIn effect. Something that you can do with some CSS3 stuff, but I’d like to do it with jQuery so it can do it cross browser.

So, something like this:

Code:

a {
-webkit-transition-duration: .33s;
-webkit-transition-property: color, background;
}

Turned into jQuery.

I don’t want to use images, just want to change the background color.

Thanks in advance!

[GreyFox135]

Here’s the effect I’m looking for my navigation. I’m currently doing this with css.

http://dev.redeyedesigner.com/redv3/

Again, thanks guys!!

[TheDoc]

An option posted over on the FreelanceSwitch forum:

http://stackoverflow.com/questions/8087 … d-on-hover

(for others looking for an answer)

[GreyFox135]

Okay, new problem:

When I load the page, my 1st mouse hover will not have the fade in effect. It will hover normally. However, on my 2nd attempt fade in works just fine.

Check it out: http://dev.redeyedesigner.com/redv3/

Here’s my js:

Code:

$(‘ul#navigation li a’).hover(function(){
$(this).stop().animate({backgroundColor: ‘#0b93e5’});
}, function() {
$(this).stop().animate({backgroundColor: ‘#ececec’});
});

Here’s relevant CSS:

Code:

#navigation li {
float: left;
margin: 0 30px 0 0;
display: inline;
height: 20px;

}

#navigation li a {
font-size: 1.385em;
display: block;
padding: 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#navigation li a:hover {
background: #0b93e5;
color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

#navigation li:hover {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

[GreyFox135]

tried removing the background color from the #navigation li a:hover, but that doesn’t work. Once I do that, nothing shows up

[GreyFox135]

So I stumped ya’ll eh? This is really turning out to be more of a challenge than I thought.

I went ahead and used some css3 to get the effect that I want. Doesn’t work in FireFox, only works with webkit at the moment. Fail…

Still working on a fix.

[GreyFox135]

YES! I made it happen.

http://dev.redeyedesigner.com/redv3/

Here’s an example of what I did:

Code:

var navBG = $(“#navigation li”).css(“background-color”);
var fadeColor = “#0b93e5”;
$(‘#navigation li’).css({ backgroundColor : navBG }, 0 );
$(“#navigation li”).hover(function () {
$(this).stop().animate( { backgroundColor:fadeColor }, 333 )
}, function () {
$(this).stop().animate( {backgroundColor: navBG }, 333 )
});

BAM!

[Author]

Posts