Forums

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:


$(\"#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:

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:

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

Here's relevant CSS:

#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:


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!

treehouse : what would you like to learn today?

Forums

[Solved] Background color change on hover