使用jQuery取消CSS懸停行為

[英]Cancel CSS hover behavior with jQuery


The website I work on has a navigation menu (a CSS-formatted unordered list) with sub-menus for some of the categories (children unordered lists).

我工作的網站有一個導航菜單(一個CSS格式的無序列表),其中包含一些類別(子無序列表)的子菜單。

This CSS rule hides a submenu unordered list:

此CSS規則隱藏子菜單無序列表:

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

And this CSS rule makes submenu unordered list appear when a visitor hovers the cursor over the top level menu link:

當訪問者將光標懸停在頂級菜單鏈接上時,此CSS規則會顯示子菜單無序列表:

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

This is done for those (possibly non-existent) users who have JavaScript disabled in their browsers.

這適用於那些在瀏覽器中禁用JavaScript的用戶(可能不存在)。

Now I'm spicing up that navigation menu with jQuery, and the very first thing that I need to do is disable the on hover behavior, dictated by CSS. For some reason I'm having hard time doing so, and could use some help. Here's what I tried:

現在我用jQuery加強了導航菜單,我需要做的第一件事就是禁用由CSS決定的懸停行為。出於某種原因,我很難這樣做,並且可以使用一些幫助。這是我嘗試過的:

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

});

No luck, CSS still controls the behavior, and the submenu pops up on hover, as if there's no jQuery present. Which means, I'm not doing it correctly.

沒有運氣,CSS仍然控制行為,子菜單在懸停時彈出,好像沒有jQuery存在。這意味着,我沒有正確地做到這一點。

I'd appreciate it if someone explained to me how this should be done!

如果有人向我解釋應該怎么做,我會很感激!

2 个解决方案

#1


3  

Try this:

DEMO

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

#2


3  

The best you can do is remove the main-navigation class from the parent. Otherwise, you cannot manipulate the styles of pseudo classes from JavaScript.

您可以做的最好的事情是從父級刪除主導航類。否則,您無法從JavaScript處理偽類的樣式。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/05/21/c17189df096a8b8ff9d51803b22712c0.html



 
  © 2014-2022 ITdaan.com 联系我们: