Question

我正在尝试在鼠标悬停时突出显示表格行。每行（tr）已经具有“偶数”或“奇数”类。因此，要突出显示鼠标悬停时的行，我需要先从行中删除CSS类“偶数”或“奇数”。请仔细阅读我的剧本：

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

  if ($('this').hasClass('even')) {
    $(this).removeClass('even');
    $(this).addClass('rowhover');
  }

  else {
    $(this).removeClass('odd');
    $(this).addClass('rowhover');
  }
},
function() {
  $(this).removeClass('rowhover');
});

但是，它不起作用。你能指出我的错误吗？谢谢。

更新1：

我使用了这个toggleClass liket this

$("tr").hover(function() {
$(this).toggleClass("rowhover");
});

然后我用萤火虫检查元素，tr得到这样的类：

<tr class="even rowhover"> where it should be <tr class="rowhover">

如果我使用这样的结果相同的结果：

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

    $(this).addClass('rowhover');
    },
 function() {
    $(this).removeClass('rowhover');        
});

我的用于rowhover类的CSS

.rowhover {background:green !important;}

更新2：

我尝试了Justin Johnson的建议：

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
        },
    function() {
     $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
  });

我用FireBug检查了元素，结果如下：

//Notice the space in the class=" rowhover" when mouse hover
     <tr class=" rowhover">

 //Notice the space in the class=" even", class=" odd" when mouse out
 <tr class=" even"> or <tr class=" odd">

更新3：它正常运作！

我在jQuery - Demonstrations and Examples of Tablesorter Plug-in发了一篇文章，但我需要添加！important来覆盖之前的样式：

tr.overRow td { background-color:#FFFF99 !important; border :2px; }

我将该规则添加到tablesorter样式表的底部，然后使用以下脚本来操作它：

// Adds "over" class to rows on mouseover
$(".tablesorter tr").mouseover(function() { $(this).addClass("overRow"); });
// Removes "over" class from rows on mouseout
$(".tablesorter tr").mouseout(function() { $(this).removeClass("overRow"); });

现在，一切都按预期运作。谢谢大家的建议。很抱歉没有在第一时间提及我正在使用jQuery tablesorter插件，我只是想突出显示悬停事件的行。

：d

Answer 1

更改

if ($('this').hasClass('even')) {

到

if ($(this).hasClass('even')) {

删除this周围的引号。此外，您需要重置原始类状态和，您可以链接您的功能：

$('tr').hover(function() {
    $(this).removeClass('even odd').addClass('rowhover');
},
function() {
    $(this).removeClass('rowhover').addClass(this.rowIndex % 2 == 0 ? "even" : "odd");
});

Answer 2

首先，尝试将事件链接起来。

$(this).removeClass('even').addClass('rowhover');

其次，为什么删除这些类？如果您只是添加该类，然后通过组合类名在CSS中覆盖它：

.even { background:black; }
.even.rowhover { background:blue; }

Answer 3

你可以让班级“偶数”和“奇怪”，只需在悬停时添加/删除“rowhover”类（例如，突出显示的TR将具有“even”和“rowhover”类）。将“rowhover”中的背景颜色（或用于突出显示行的任何颜色）设置为CSS中的“！important”以覆盖“偶数”和“奇数”。

这样你就不必关心TR以前的类了，只需简单地编写你的代码，你只需在悬停时调用“add rowhover”并在mouseout上删除它。

Answer 4

您使用常规的“纯粹”JavaScript吗？在我看来好像你会使用一些javascript库（例如mootools）。

Answer 5

这行代码似乎错了：

if ($('this').hasClass('even')) {

您引用了this个关键字，请尝试以下操作：

if ($(this).hasClass('even')) {

Answer 6

（作为替代方案）而不是使用jQuery来实现此功能，只需使用内置的css功能

而不是在css中使用rowhover类

tr:hover
    {
        ...styles here
    }

检查Table tr是否具有类，然后删除并在Hover事件上添加新类

6 个答案: