鼠標不再懸停後，CSS懸停樣式仍然存在

以下情況發生在Safari 7.0.1和IE8版本中。鼠標不再懸停後，CSS懸停樣式仍然存在

步驟來重現問題： http://goo.gl/lP3Ky1

問題：該行的懸停狀態仍然駁回彈出菜單後，它不會消失無論身在何處鼠標，直到你將鼠標懸停在它一次。

預期的行爲是什麼？該行的懸停狀態在關閉彈出菜單後應該消失。

有人知道Safari 7.0.1和IE8的修正嗎？我可以用一些手動的方式來「鬆開」css懸停狀態。

來源

2014-01-30 Hans

這個bug也存在於Safari 6.1中，但據我所知，開發工具顯示懸停狀態就好了。 – Nit

@Marcel這不是一個瀏覽器bug –

@AmitJoki它是，https://code.google.com/p/chromium/issues/detail?id=170570 – Hans

這是一個有待解決的問題。雖然解決方案有點怪異，但它的工作原理。設置HTML爲「噓」後，我們克隆了整個行，插入和刪除舊的：

$(function() { 
    $("table").on("click", "td", function() { 
    $("#menu") 
     .clone() 
     .one("click", function() { 
       var $td = $(this).closest("td"), 
        $tr = $td.parent(); 

       $td.html("boo"); 
       $tr.clone(/* true */).insertAfter($tr); 
       $tr.remove(); 
       return false; 
     }) 
     .appendTo(this) 
     .show(); 
    }); 
});

http://jsfiddle.net/ryanwheale/3BUaT/26/

來源

2014-02-07 18:31:07

因此「錯誤的做法」不會變得更加正確！ ;-) – Netsurfer

當一個錯誤的方法是唯一的方法時，它就會變得更少錯誤;）當菜單消失時，瀏覽器沒有註冊mouseout事件。我甚至試圖在左邊菜單動畫，以迫使鼠標過境...無濟於事。 –

「當錯誤的方法是你唯一的方法......」那麼你的設計就有錯誤！ ;-)我認爲我在答覆中表明，這不是「唯一的方法」。所以沒有理由「做錯事」！ – Netsurfer

您正在將div #menu追加到您的函數td中。現在，當鼠標懸停在td或附加菜單上時，CSS會將懸停狀態應用於td。將鼠標懸停在菜單上會應用tr：hover td css，因爲菜單現在是td的一部分。

來源

2014-01-30 15:07:31 DJSrA

這可能是對的。但我正在尋找修補程序或解決方法，以在safari和IE8中完成這項工作。它適用於所有其他瀏覽器。我會沒事的用一些手動的方式來「鬆開」css懸停狀態...... – Hans

以下是解決方法 - http://jsfiddle.net/3BUaT/11/。經歷了很多stackoverflow的帖子後，明白它不可能從javascript中刪除css僞類。所以肯定需要解決方法。

我使用

tr.hovered td { 
    background-color: lightblue; 
}

，而不是常規CSS懸停狀態。

問題是，當你點擊菜單中的li時，它並不完全從safari中的CSS中觸發mouseout事件。從技術上講，你並沒有真正將鼠標移出元素。這只是元素被刪除。這看起來像在safari中的錯誤。

來源

2014-02-04 05:06:49 nightgaunt

這是一個堅實的JavaScript解決方案。但我不想強制運行的瀏覽器用JavaScript來完成懸停樣式，但堅持css的：懸停。 – Hans

@Marcel：這聽起來有點有趣，因爲整個菜單的事情取決於Javascript！無論在這些brwosers中是否存在錯誤，至少是「壞習慣」（通過腳本將絕對定位的元素添加到表格單元中，這些單元也位於單元「外部」，然後再次移除它們）。我也不明白爲什麼懸浮僞類屬於表格行（而不是單元格）！？另外還要看看用戶點擊幾個單元格時發生了什麼（每次單擊時添加了一個菜單，但沒有一個「消失」，因此它們全部重疊）。你的整個方法並不理想。 – Netsurfer

@Marcel：所以如果你想CSS中的懸停效果，即使JS被禁用，在你的HTML元素中使用'no-js'類，就像[Modernizr]（http://modernizr.com/）那樣。如果JS可用，那麼使用建議的JS解決方案！ – Netsurfer

好了，這是我提出的解決方案，它從我的意見採取分（Tejas的Jayasheel的答案）考慮：JSFiddle

的區別是：

#menu時，不會複製和不添加到表格單元格中，但只是重新定位（所以元素也只顯示一次）
CSS懸停僅適用於'no-js'類存在於HTML元素中（需要添加到原始文件中）
否則懸停效果通過應用類實現「點擊」的細胞
另外，當菜單已經可見懸停效果是「禁用」，對已經切換上的所有TD的
單擊另一個類的菜單外「點擊」單元將關閉/隱藏菜單沒有任何進一步的行動

.no-js td:hover, td.hover-enabled:hover, td.clicked { background-color: lightblue; }

什麼是預期的行爲？在關閉彈出式菜單後，該行的懸停狀態應該消失。

也許......！但請記住，通過刪除DOM中的懸停元素，您會嚴重「迷惑」瀏覽器。我想Safari和IE 8只是「不承認」以前的懸停部分不再被徘徊。這可能也可能不是一個「錯誤」。但至少這是「糟糕的做法/寫作風格」，應該避免！

有人知道Safari 7.0.1和IE8的修正嗎？我可以用一些手動的方式來「鬆開」css懸停狀態。

「修復」顯示在我的示例中。在涉及腳本和懸停時，添加，刪除或切換類是常見的建議。通過這樣做，你完全避免了「問題」。因爲即使在任何瀏覽器的未來版本中，這種情況下的行爲最多也是「不可預知的」。

來源

2014-02-06 23:20:02 Netsurfer

它不是瀏覽器的錯。是你的。您正在將菜單列表追加到該行。所以菜單列表是該行的一個子項。因此，如果您將鼠標懸停在小孩身上，父母也將處於懸停狀態。

我已經更新您的jsfiddle：

Jsfiddle;

$(function() { 
    $("td").on("click", function() { 
    $("#menu") 
     .clone() 
     .one("click", function() { 
      // this is key to reproduce it. 
      $(this).closest("td").html("boo"); 
      return false; 
     }) 
     .appendTo($(this).parent().parent().last()) 
     .show(); 
    }); 
});

來源

2014-02-08 05:34:02

鼠標不再懸停後，CSS懸停樣式仍然存在

回答

相關問題