jQuery umístěte kurzor a vyberte třídu

Nechci měnit barvu pozadí prvku div dynamicky pomocí následujících HTML, CSS a 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');
});

UPRAVIT: Zapomněl jsem říct, že jsem měl důvody, proč nechci používat způsob css.

A skutečně jsem zapomněl zkontrolovat, zda byl načten DOM.

Odpověď

Váš kód mi přijde v pořádku.

Ujistěte se, že je DOM připraven před spuštěním javascriptu pomocí funkce $(callback) jQuery:

$(function() {
   $('.menuItem').hover( function(){
      $(this).css('background-color', '#F00');
   },
   function(){
      $(this).css('background-color', '#000');
   });
});