GreyFox135

# February 10, 2010 at 1:59 pm

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

# February 10, 2010 at 3:35 pm

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

# February 10, 2010 at 4:04 pm

An option posted over on the FreelanceSwitch forum:

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

(for others looking for an answer)

GreyFox135

# February 10, 2010 at 7:02 pm

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

# February 10, 2010 at 7:57 pm

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

GreyFox135

# February 11, 2010 at 1:27 am

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

# February 11, 2010 at 4:49 am

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!