添加CSS悬停在JavaScript处理表格单元格

Question

我目前使用下面的代码基于其价值来着色单元：

cell.each(function() { 
      var cell_value = $(this).html(); 
      if (cell_value == 0){ 
       $(this).css({'background' : '#DF0101'}); 
      } else if ((cell_value >= 1) && (cell_value <=10)) { 
       $(this).css({'background' : '#FF7C00'}); 
      } else if (cell_value >= 8) { 
       $(this).css({'background' : '#04B404'}); 
      } 
     }); 

我还添加了CSS样式表：

td:hover{ 
background-color:#CA2161;} 

所以，我怎样才能让这个悬停在JavaScript处理会改变颜色的细胞？在那一刻他们不会改变，他们只是停留在上面处理的颜色^^^

Answer 1

编辑：原来你希望当你悬停时颜色离开而不是显示。简单的改变。

好吧，首先，你应该分开这些伸到CSS类：

.ZeroValue { 
    background:'#DF0101'; 
} 

.ValueBetween1And10 { 
    background:'#FF7C00'; 
} 

.ValueOver8 { 
    background:'#04B404'; 
} 

.ValueTransparent { 
    background:transparent !important; 
} 

添加上述类上$(document).ready()根据它们的值：

if(cell_value === 0){ 
    cell.addCLass('ZeroValue'); 
} else if((cell_value >= 1) && (cell_value <= 10)){ 
    cell.addClass('ValueBetween1And10'); 
} else if(cell_value >= 8){ 
    cell.addClass('ValueOver8'); 
} 

然后，只需动态添加transparent类当您悬停时，请在您离开时将其移除：

cell.on({ 
    mouseenter:function(){ 
     $(this).addClass('ValueTransparent'); 
    }, 
    mouseleave:function(){ 
     $(this).removeClass('ValueTransparent'); 
    } 
}); 

或者，如果有一个独特的颜色，每一个项目，你想暂时移除，你只需创建一个函数：

function classByValue(cell,cell_value){ 
    if(cell_value === 0){ 
     cell.addCLass('ZeroValue'); 
    } else if((cell_value >= 1) && (cell_value <= 10)){ 
     cell.addClass('ValueBetween1And10'); 
    } else if(cell_value >= 8){ 
     cell.addClass('ValueOver8'); 
    } 
} 

这将清除所有的类当鼠标进入，然后重新添加当鼠标进入时，该类基于cell_value。然后在负载和mouseleave上动态应用。该$(document).ready()：

cell.each(function(){ 
    classByValue(this,this.val()); 
}); 

而且悬停：

cell.on({ 
    mouseenter:function(){ 
     $(this).removeClass('ZeroValue ValueBetween1And10 ValueOver8'); 
    }, 
    mouseleave:function(){ 
     classByValue($(this),$(this).val()); 
    } 
}); 

有你有它，多种方式来实现自己的目标。您可能需要修改$(this).val()以适当反映该特定cell的值，但如果没有您的HTML，我无法真正确定这一点。

作为一方，>= 8的最后一个选项应该重新考虑，因为值8或9永远不会触发它。

Answer 2

刚刚尝试的悬停功能绑定到你的表的“TDS”像这样

 $('td').hover(function(){ 
      $(this).css('background-color', '#CA2161'); 
     }); 

，如果你想删除鼠标出来的颜色，你可以试试这个

 $("td").hover(
      function() { 
      $(this).css('background-color', '#CA2161'); 
     }, function() { 
     $(this).css('background-color', ''); 
     } 
    );