Overwrite CSS :hover with .hover doesn´t work
Hello everybody,
I hope someone can help me with a little problem.
I´m looking for a way to overwrite the :hover styles given from a css-file. My page includes a menu working without JS very well, but I want some special effects for users with enabled JS (fadeOut). The problem is that when I create a .hover method in jQuery, the CSS :hover is still active.
A short example, to clarify:
CSS:
-
li > .submenu {
display: none;
}
li:hover > .submenu {
display: block;
}
jQuery:
-
$("li").hover(function() {
$(this).find("> div").show();
},
function() {
$(this).find("> div").fadeOut();
});
The selectors are all right, I´ve tested that already. Seems linke jQuery wants to fade out but can´t, because the CSS is faster.
So, is there a way to deactivate the li:hover stuff? I´ve searched for hours but didn´t find a solution.
Thanks!