Cancel CSS hover behavior with jQuery -
the website work on has navigation menu (a css-formatted unordered list) sub-menus of categories (children unordered lists).
this css rule hides submenu unordered list:
.main-navigation ul ul { display:none; }
and css rule makes submenu unordered list appear when visitor hovers cursor on top level menu link:
.main-navigation ul li:hover > ul {; display:block; }
this done (possibly non-existent) users have javascript disabled in browsers.
now i'm spicing navigation menu jquery, , first thing need disable on hover behavior, dictated css. reason i'm having hard time doing so, , use help. here's tried:
jquery(document).ready(function($) { $('.main-navigation ul li:hover > ul').css('display', 'none'); });
no luck, css still controls behavior, , submenu pops on hover, if there's no jquery present. means, i'm not doing correctly.
i'd appreciate if explained me how should done!
try this:
jquery(document).ready(function($) { $('.main-navigation ul li').on('mouseover',function(){ $('.main-navigation ul li:hover > ul').css('display', 'none'); }); });
Comments
Post a Comment