jquery - 避免使用 jQuery 突出显示所有行和列

Question

我在 Twitter Bootstrap 中为我的表使用以下 jQuery:

$('td').mouseover(function () {
   $(this).siblings().css('background-color', '#EAD575');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});
$('td').mouseleave(function () {
   $(this).siblings().css('background-color', '');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});

我在一个网站上找到了这段代码，我必须承认，它工作得很好......

...但是可以稍微调整一下，使其不针对选定的行和/或列。

例如忽略 ID 为“nohover”的行/列

这可能吗？这样做的原因是我有大约 3 或 4 个不应突出显示的合并行，因为它看起来“很奇怪”。

任何人都知道这是否可能，如果可能的话；如何？

Answer 1

一种更简洁的方法是更多地依赖外部 CSS。您可以添加具有该背景颜色的 CSS 类，而不是使用内联 CSS 更改背景颜色。只需确保您的 .no-hover 类的背景色设置为透明(或表格单元格的默认背景色)。

由于 CSS 级联，您可以将 .no-hover 类放在样式表中新类的下方，并且 no-hover 类将优先。

代码将从

$('td').mouseover(function () {
   $(this).siblings().css('background-color', '#EAD575');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '#EAD575');
});
$('td').mouseleave(function () {
   $(this).siblings().css('background-color', '');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').css('background-color', '');
});

到

$('td').mouseover(function () {
   $(this).siblings().addClass('active-hover');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').addClass('active-hover');
});
$('td').mouseleave(function () {
   $(this).siblings().removeClass('active-hover');
   var ind = $(this).index();
   $('td:nth-child(' + (ind + 1) + ')').removeClass('active-hover');
});

(将 active-hover 更改为您决定要命名的悬停类)

我会避免使用 CSS3 :not 选择器，因为 <=IE8

不支持它