懸停行時背景顏色更改不起作用（jsfiddle）

Question

我在使用jQuery時遇到背景顏色變化問題。

當頁面首次加載並且用戶將鼠標懸停在表格行上時，表格行的背景會更改。

一旦用戶單擊表行單元格以生成jquery彈出窗口，該彈出窗口所屬行的背景顏色就會更改。

用戶通過單擊文檔中的任意位置來關閉彈出窗口（使用jquery），將第一行中提到的行的懸停突出顯示功能禁用，並且我希望它保持有效，只要沒有彈出窗口打開。

這就是我嘗試添加到我的jquery中的方法，它可以一直顯示到彈出窗口之一顯示一次為止。 換句話說，下面的代碼僅觸發一次，而不是像我需要的那樣保持有效：

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

js小提琴：

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

您需要以“新鮮”類為基礎。

像

    $("#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!'); }

帶走：

1. 始終在事件處理程序中進行檢查（在這種情況下，請進行切換）
2. 確保您認為解決為正確的事情實際上是解決為正確的事情。