备用行颜色,鼠标悬停,鼠标悬停和onclick事件无法一起使用

时间:2014-01-15 09:51:30

标签: jquery

Qquery代码O用于突出显示备用行颜色,在mouse-overmouse-out我添加了css类,on-click也是我' m试图添加一个css类,但它没有反映出来。

主要问题是,此时只有两个事件可以合作而不是全部

  function rowHighlight(){  
    $(function(){
    $("#facCodes tr:odd").addClass('oddRow');
    $("#facCodes tr:even").addClass('evenEven');
    $('#facCodes tr').hover(function() {
          $(this).addClass('hover');
       },
       function() {
          $(this).removeClass('hover');
    });

});
 $('#facCodes tr').click(function(event){
    $(this).addClass("click").siblings().removeClass("click");
 });

}

CSS代码我使用

.oddRow{background:#E3E5E6;color:black}
.evenRow{background:white;color:black}
.hover{background:blue;color: white;}
.click{background:#FF9900;color: white;}

1 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/QUQzM/2/

jquery的

$(function(){


    $('#facCode').find('tr').on('click', function(){
        $(this).toggleClass('green');
    })

    $('#facCode tr:odd').addClass('blue');
    $('#facCode tr:even').addClass('yellow');


})

CSS

  tr:hover{
    background:grey;
}
.green, tr:active{
    background:lightgreen !important;
}
.blue{
    background:lightblue;
}
.yellow{
    background:yellow;
}