Home › Forums › JavaScript › [Solved] Background color change on hover
- This topic is empty.
-
AuthorPosts
-
February 10, 2010 at 1:59 pm #27947
GreyFox135
ParticipantHi 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!
February 10, 2010 at 3:35 pm #70727GreyFox135
ParticipantHere’s the effect I’m looking for my navigation. I’m currently doing this with css.
http://dev.redeyedesigner.com/redv3/
Again, thanks guys!!
February 10, 2010 at 4:04 pm #70728TheDoc
MemberAn option posted over on the FreelanceSwitch forum:
http://stackoverflow.com/questions/8087 … d-on-hover
(for others looking for an answer)
February 10, 2010 at 7:02 pm #70735GreyFox135
ParticipantOkay, 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;
}February 10, 2010 at 7:57 pm #70736GreyFox135
Participanttried removing the background color from the #navigation li a:hover, but that doesn’t work. Once I do that, nothing shows up
February 11, 2010 at 1:27 am #70750GreyFox135
ParticipantSo 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.
February 11, 2010 at 4:49 am #70752GreyFox135
ParticipantYES! 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!
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.