Question

我有一个使用奇/偶和悬停功能的表格。我想在选择行时禁用悬停。

这是我的代码：

.odd{
    background: #f7f7f7;
}

.even {
    background: #ffffff;
}

th:hover, tr:hover {
    background: #e6e6e6;
}

<tr class="myClass ${(k % 2) == 0 ? 'even' : 'odd'}">

$('.myClass').click(function() {

    $(this).unbind('mouseenter').unbind('mouseleave');
    //I also tried this:
    $(this).off('hover');
});

Answer 1

你似乎对jQuery和CSS感到困惑。您正在CSS中应用hover，而不是jQuery，因此禁用Hover的jQuery事件不会阻止效果发生。

无法禁用我所知道的CSS悬停事件，您可以尝试以下方法作为解决方法：

CSS ：将一个名为hover的自定义类添加到CSS中，并将悬停事件应用于此。

.odd{
    background: #f7f7f7;
}

.even {
    background: #ffffff;
}

.hover:hover {
    background: #e6e6e6;
}

HTML ：

将新的hover类添加到初始HTML

<tr class="myClass hover ${(k % 2) == 0 ? 'even' : 'odd'}">

jQuery ：

单击该项时删除该类。

$('.myClass').click(function() {
    $(this).removeClass('hover');
});

Answer 2

CSS :hover和JavaScript .hover()不等同。

要解决这个问题，我可能会在JS中点击添加或删除类，并使我的CSS更具体：

CSS

th:not(.clicked):hover,
tr:not(.clicked):hover {
    background: #e6e6e6;
}

JQuery的

$('.myClass').click(function() {
    $(this).toggleClass('clicked');
});

我们在这里做的是在每次点击相关元素时添加和删除类.clicked。然后，我们的目标是使用此类排除元素。