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', '');
});

我在网站上发现了这段代码，我必须承认，这完全有效......

...但是有可能稍微调整一下，所以它也不会以所选的行和/或列为目标。

例如，忽略名为“nohover”

的ID的行/列

这可能吗？原因是，我有大约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');
});

（将活动悬停更改为您决定悬停类以命名的任何内容）

我会避免使用CSS3：not selector，因为＆lt; = IE8

不支持它

Answer 2

$().not('.nohover')应该做的伎俩

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

https://jsfiddle.net/cd54pqdx/1/

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

2 个答案: