Hi all,
I have a minor problem with my webpage I'm designing. I'm doing
pulldown menus via a UL, with LIs that have child ULs (the pulldown
menus), where the pulldown menus fade in when you mouseover the parent
LI. So as to degrade gracefully if the browser isn't running
Javascript, I want to use CSS to at least make the child ULs appear
instantly on mouseover of the LI, and disappear on mouse out. I can
do this simply using:
ul.rootMenu li:hover ul {
visibility: visible;
}
(where elsewhere I set those child ULs to be hidden by default).
The minor problem is that when I then apply my 'fade in' effect in
jQuery, I do it using something like this:
jQuery("ul.rootMenu li").hover(
function(){ // On mouse over
jQuery(this).find("ul").each(function(){
// In case we're currently animating this list, stop
the animation
immediately.
jQuery(this).stop(true, true);
var origHeight = jQuery(this).height();
var origWidth = jQuery(this).width();
jQuery(this).css({
'visibility' : 'visible',
'opacity' : 0,
'width' : origWidth,
'height' : 0
}).animate({
'opacity' : 1,
'width' : origWidth,
'height' : origHeight
}, 100, 'linear');
// Only want to do this for the first matched list;
break on the
first iteration.
return false;
});
}, [...]
This works well but it causes a kind of flicker or 'double-take'
sometimes when I mouse over in Opera. I'm guessing this is because
Opera's CSS engine immediately causes the menu to instantly popup
(become visislbe) because of the CSS :hover rule applied to the LI,
but then quickly the Javascript kicks in and makes it invisible and
fades it in. What I think I need to do is therefore remove
that :hover rule that I set in CSS via the 'ul.rootMenu li:hover ul'
selector, but of course it's very difficult to access pseudo selectors
in Javascript. So can anyone think of a better way of doing this, or
a way I can remove that 'ul.rootMenu li:hover ul' rule in Javascript?
I know it's difficult but could adding the ability to
manipulate :hover pseudo selector rules, and maybe others too
(:before, :after?) in jQuery be possible? It would be a handy
addition.
Best regards,
Jeremy Morton (Jez)
--
You received this message because you are subscribed to the Google Groups
"jQuery Development" group.
To post to this group, send email to jquery-...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-dev+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-dev?hl=en.
