I wan’t to change the background color of a div dynamicly using the following HTML, CSS and javascript. HTML:
<div id="menu"> <div class="menuItem"><a href=#>Bla</a></div> <div class="menuItem"><a href=#>Bla</a></div> <div class="menuItem"><a href=#>Bla</a></div> </div>
CSS:
.menuItem{ display:inline; height:30px; width:100px; background-color:#000; }
Javascript:
$('.menuItem').hover( function(){ $(this).css('background-color', '#F00'); }, function(){ $(this).css('background-color', '#000'); });
EDIT: I forgot to say that I had reasons not to want to use the css way.
And I indeed forgot to check if the DOM was loaded.
Answer
Your code looks fine to me.
Make sure the DOM is ready before your javascript is executed by using jQuery’s $(callback) function:
$(function() { $('.menuItem').hover( function(){ $(this).css('background-color', '#F00'); }, function(){ $(this).css('background-color', '#000'); }); });