Question

使用jquery时，我遇到了背景颜色变化问题。

当页面第一次加载并且用户将鼠标悬停在表格行上时，表格行的背景会发生变化。

用户单击表格行单元格以生成jquery弹出窗口后，弹出窗口所属行的背景颜色会发生变化。

一个用户通过单击文档上的任意位置关闭弹出窗口（使用jquery），第一行中提到的行的悬停功能上的突出显示被禁用，我需要它才能保持有效没有一个弹出窗口是打开的。

这是我尝试添加到我的jquery中的东西，它一直有效，直到其中一个弹出窗口显示一次。换句话说，下面的代码只触发一次，而不是像我需要的那样保持生效：

if($(".webpopup,.phonepopup").is(":hidden")){
    $("tr").hover(function(){
        $(this).toggleClass('fresh');
    });
}

小提琴：

http://jsfiddle.net/vUWsb/

Answer 1

尝试!important：

.fresh{background-color:#ddd !important;}

$("tr").hover(function(){
    $(this).addClass('fresh');
}, function() {
    $(this).removeClass('fresh')    
});

http://jsfiddle.net/vUWsb/6/

这样的东西？

 $("tr").hover(function(e){
        if ($(".webpopup, .phonepopup").is(":visible")) {
           return false;
        }
       $(this).addClass('fresh');     
    }, function() {
       $(this).removeClass('fresh');
 });

http://jsfiddle.net/vUWsb/10/

Answer 2

在我看来，单击一个单元格后悬停不起作用。相反，当您单击表格单元格时，您似乎将背景设置为默认白色：

$(document).click(function() {
    $("#favorites-table tr").css({
        "background-color": "#fff" // <--- this part
    });
    $(".webpopup, .phonepopup").hide();
});

由于内联样式优先于使用类的样式，因此您永远不会看到悬停效果，因为它正被您设置的背景颜色隐藏。

Answer 3

你需要根据你的新鲜＆＃39;而不是。

像

这样的事情

    $("#favorites-table tr").css({
        "background-color": "#fff"
    });

添加内联样式，胜过类css。

使用addClass和removeClass代替

http://jsfiddle.net/imoda/vUWsb/2/

Answer 4

其他贡献正确地指出您需要使用类而不是内联颜色，但正如MHZ所说，这不是所有期望的功能。悬停的问题在于它尝试测试可见性的方式不正确。考虑可见性的原始测试：

if($(".webpopup,.phonepopup").is(":hidden")){
    $("tr").hover(function(){
        $(this).toggleClass('fresh');
    });
}

if函数将始终为true。然后，因为它总是如此，它将创建悬停事件。这在文档加载时发生一次。然后你就会遇到这个事件监听器。

相反，MHZ，我想你想要的东西如下：

theyAreVisible = function() {
    var shown = $('.webpopup,.phonepopup').map(function() {
        return $(this).is(':visible') ? true : null;
    });
    return shown.length > 0 ? true : false;
};

$("tr").hover(function() {
    if (!theyAreVisible()) $(this).addClass('fresh');
}, function() {
    if (!theyAreVisible()) $(this).removeClass('fresh');

});

这样，你有一个悬停事件处理程序，它检查是否有任何弹出窗口是打开的。 map函数将循环遍历每个并查找是否有任何个体打开，如果找到任何个体则返回true。但我们不能只返回此结果，因为if（[]）将解析为true。考虑：

if ([]) { console.log('yup!'); }

外卖：

始终在事件处理程序中进行检查（在本例中为切换）
确保您认为正在解决的事情真实地解决为真。

悬停行不起作用时的背景颜色变化（jsfiddle）

4 个答案: