jQuery悬停和类选择器

我不想使用以下HTML,CSS和javascript动态地更改div的背景颜色.HTML:

    
Bla
    
Bla
    
Bla

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');
});

编辑:我忘了说我有理由不想使用css方式.

我确实忘了检查DOM是否已加载.

你的代码看起来很好.

在使用jQuery的$(回调)函数执行javascript之前,请确保DOM已准备就绪:

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

我建议不要使用JavaScript进行这种简单的交互.CSS能够做到这一点(即使在Internet Explorer 6中),它比使用JavaScript做得更响应.

您可以使用":hover"CSS伪类,但为了使其适用于Internet Explorer 6,您必须在"a"元素上使用它.

.menuItem
{
    display: inline;
    background-color: #000;

    /* width and height should not work on inline elements */
    /* if this works, your browser is doing the rendering  */
    /* in quirks mode which will not be compatible with    */
    /* other browsers - but this will not work on touch mobile devices like android */

}
.menuItem a:hover 
{
    background-color:#F00;
}

这可以使用:hover伪类在CSS中实现.(:hover对

   Bla
   Bla
   Bla

.menuItem{
  height:30px;
  width:100px;
  background-color:#000;
}
.menuItem:hover {
  background-color:#F00;
}

    
        
        
        
        
    
    
        

            
Bla
            
Bla
            
Bla
        
    

.menuItem
{

    display: inline;
    height: 30px;
    width: 100px;
    background-color: #000;

}

$( function(){

    $('.menuItem').hover( function(){

        $(this).css('background-color', '#F00');

    },
    function(){

        $(this).css('background-color', '#000');

    });

});

  

    
Bla
    
Bla
    
Bla
  

#menu {
  margin: 0;
}
#menu li {
  float: left;
  list-style: none;
  margin: 0;
}
#menu li a {
  display: block;
  line-height:30px;
  width:100px;
  background-color:#000;
}
#menu li a:hover {
  background-color:#F00;
}