Show/hide a div with mouseover and mouseout on <li>

Hello,
I have this piece of HTML code:


<ul>
  <li>Cat 1
    <div class="actions">Edit | Delete</div>
    <ul>
      <li>SubCat 1
        <div class="actions">Edit | Delete</div>
      </li>
      <li>SubCat 2
        <div class="actions">Edit | Delete</div>
      </li>
    </ul>
  </li>
  <li>Cat 2
    <div class="actions">Edit | Delete</div>
  </li>
  <li>Cat 3
    <div class="actions">Edit | Delete</div>
  </li>
</ul>

The divs inside each li are hidden by default; on mouse over each <li>, I’d like that its children <div> appear, and disappears again on mouse out
I wrote this jQuery script, but I have problems with event propagation (hovering an inner <li> triggers also it’s parent <li>)


$('li').hover(function(){
  $('.actions', this).css('visibility', 'visible')
  },function(){
  $('.actions', this).css('visibility', 'hidden')
  })

I also tried stopping event propagation, but the first <li> (the one with the nested <ul>) doesn’t work anymore…

I am not good at jQuery, but I can’t figure out where am I wrong… I tried googling but found nothing similar to my problem…

Please, can you help? Thanks in advance

This should do the trick:


$(function()
{
	$('li').hover(function(){
		var flag=false;
		$.each($('li',this),function(i,element){if($(element).data('ismouseover'))flag=true;}
		);
		$(this).data('ismouseover',true);
		if(flag)return;
		showHideDivs();
		},
		function()
		{$(this).data('ismouseover',false);showHideDivs();}
	);
	
	function showHideDivs()
	{
		$.each($('li'),function()
			{
				var flag=false;
				if($(this).data('ismouseover'))
				{
					$.each($('li',this),function(i,element)
						{
							if($(element).data('ismouseover'))flag=true;
						}
					);
					if(!flag)
					{
						$(this).children('div.actions').css('visibility','visible');
						return;
					}
				}
				$(this).children('div.actions').css('visibility','hidden');
			}
		);
	}	
});

Sorry it’s a bit large but your problem is quite tricky.
Let me know if it helps.

Thanks for your help, Walken! At last I solved the problem on Experts Exchange, I share the solution here:


$(document).ready(function () {
	$('li').mouseover(function (e) {
		e.stopPropagation();
		$('>.actions', this).css('visibility', 'visible')
	});
	$('li').mouseout(function (e) {
		e.stopPropagation();
		$('.actions').css('visibility', 'hidden')
	})
});

They told me to use “mouseover()” and “mouseout()” instead of “hover()” (that makes use of “mouseenter()” and “mouseleave()” and can be problematic in cases like mine… It’s a little bit cryptic but it definitely works)

Thanks still!