$( function () {
                var $div_li = $( "ul li" );
                $div_li.click( function () {
                    $(this).removeClass('hover')
                    $( this ).addClass( "selected" )
                           .siblings().removeClass( "selected" );
                } ).hover( function () {
                    if($(this).hasClass('selected')) return;
                    $( this ).addClass( "hover" );
                }, function () {              
                    $( this ).removeClass( "hover" );
                } )
            } )

解决方案 »

  1.   

    经测试,与css的定义顺序无关
      

  2.   

    你的样式中hover跟select的优先级都是一样的,所以如果一个元素同时拥有2个样式,后定义的样式会覆盖先定义的样式。因为hover在select之后,所以hover上去的时候如果已经有select样式的话,hover样式会覆盖select样式。我在2楼给出的代码是无视这个顺序了。
      

  3.   

    我知道你的代码无视这个顺序,为了不让我混淆,咱现在先不说你的代码.
    说我贴的代码,你的意思是我定义的CSS
      li{ list-style-type: none; width:100px;cursor:pointer; } 
           li.selected{ color: #ffffff; background-color: black; }
       li.hover { background-color: #dfdfdf; }
    因为li.hover定义在后面,它覆盖了  li.selected{ color: #ffffff; background-color: black; }是吗?
      

  4.   

    但jQuery的代码是单击和hover这两个事件都发生了,
    也就是说它做了addClass("selected")和addClass("hover') , 问题是,我的代码和书上仅有的不一样是
    它的css li.hover 在前,li.selected在后,而我的li.slected在后,li.hover在前
              $( function () {
                     var $div_li = $( "ul li" );
                     $div_li.click( function () {
                         $( this ).addClass( "selected" )
                                .siblings().removeClass( "selected" );
                     } ).hover( function () {
                         $( this ).addClass( "hover" );
                     }, function () {
                         $( this ).removeClass( "hover" );
                     } )
                 } )
      

  5.   

    请问你的测试结果是不是达到了3个效果,还是第三个效果没达到
    1当鼠标 hover在li上的时候变灰色,
     2.当li被click后,li变黑色.表示li被选中
     3当li被选中,同时鼠标在上面hover着的时候,这时要是选中色(也就是黑色),不能再被hover给弄成灰的了!
      

  6.   

       li.selected.hover { color: #ffffff; background-color: black; }在加一行 css           
    没选中    没选中+(鼠标hove)选中        选中+(鼠标hove)
    应该是4种状态  何必节省这么一行css呢
    这个顺序 我觉得 就算有  也不要依赖 
    为什么? 含义太晦涩了