取消CSS懸停行爲與jQuery

我工作的網站有一些導航菜單（一個CSS格式的無序列表）的子菜單的一些類別（兒童無序列表）。取消CSS懸停行爲與jQuery

這CSS規則隱藏的子菜單無序列表：

.main-navigation ul ul { 
    display:none; 
}

這CSS規則使得當訪問者在頂級菜單鏈接滑鼠遊標子菜單無序列表顯示：

.main-navigation ul li:hover > ul {; 
    display:block; 
}

這是針對在瀏覽器中禁用了JavaScript的用戶（可能不存在的用戶）完成的。

現在我正在用jQuery注意那個導航菜單，並且我需要做的第一件事是禁用懸停行爲，由CSS規定。出於某種原因，我很難這樣做，並可以使用一些幫助。下面是我的嘗試：

jQuery(document).ready(function($) { 
    $('.main-navigation ul li:hover > ul').css('display', 'none'); 

});

沒有運氣，CSS仍然控制的行爲，並在子菜單彈出懸停，因爲如果沒有jQuery的存在。這意味着，我沒有正確地做。

我會很感激，如果有人向我解釋這應該怎麼做！

來源

2013-05-21 Dimitri Vorontzov

試試這個：

DEMO

jQuery(document).ready(function($) { 
    $('.main-navigation ul li').on('mouseover',function(){ 
     $('.main-navigation ul li:hover > ul').css('display', 'none'); 
    }); 
});

來源

2013-05-21 14:21:15

完美，@roasted！像魅力一樣工作。謝謝！ –

'+ 1'好玩的技巧;） – 2013-05-21 14:29:04

關於這個片段，@roasted的一切都是完美的，只有一個例外。該腳本不考慮如果用戶將鼠標移離鏈接會發生什麼情況。你能幫助一下嗎？我會非常感激！ –

您可以做的最好的做法是從父項中移除main-navigation類。否則，您無法操作JavaScript中僞類的樣式。

來源

2013-05-21 14:20:07 techfoobar

你的意思是，這樣的事情，@techfoobar：$（ '主導航UL認證。 '）removeClass（' 主導航。'）。 - 我對嗎？ –

刪除類，你會鬆散所有附加的CSS樣式規則，甚至一些你想保留 –

是的，並出於一些神祕的原因，刪除該類沒有取消懸停行爲，@roasted。（我懷疑我做錯了，不知何故。）仍然 - 你的解決方案是最好的。 –

取消CSS懸停行爲與jQuery

回答

相關問題