I should add that if I use mouseenter, it fixes the problem, but then
for some reason my dropdowns parent won't stay active, whereas it will
on mouseover.
On Aug 11, 10:08 pm, sammahoney <samom...@gmail.com> wrote:
> Hi guys
>
> I have a dropdown menu. When the dropdown is hovered, I need a bg
> image to show, then slowly fade out when the mouse leaves. I wrote
> this little script for it:
>
> var $j = jQuery.noConflict();
>
> $j(function(){
>
> $j("#dropdown-nav li ul li").mouseover(function(){
> $j(this).stop().before('<li class="hoverbg"></li>');
>
> }),
>
> $j("#dropdown-nav li ul li")
> .mouseleave(function(){
> $j("#dropdown-nav li ul
> li.hoverbg").stop().fadeOut(300, function()
> {
> $j(this).remove();
> });
> })
>
> });
>
> So it adds an extra li above the one being hovered (which via css is
> positioned absolutely so the next li displays over the top). Anyways,
> it works fine, but sometimes when hovering it adds 2 or 3 li's in
> there. I thought the stop() would sort that, but it hasn't.
>
> Any ideas why that's happening? And could this be written better? It's
> one of my first attempts with jQuery so go easy on me!
