要知道鼠标是否仍悬停菜单

Question

I have the following menu construction very resumed (cant change HTML code due is impossible, only CSS and JS!):

 $('span').on("hover", handleHover('span')); function handleHover(e) { $(e).on({ mouseenter: function() { $(this).addClass('selecc'); $(this).next("ul").show(); }, mouseleave: function() { $(this).removeClass('selecc'); $(this).next("ul").hide(); } }); } 

 span { display:block; } ul { background-color:#CCC; color:#000; display:none; margin:0; } .selecc { background-color:Red; color:#FFF } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <span>Option 1</span> <ul> <li>suboption 1-1</li> <li>suboption 1-2</li> <li>suboption 1-3</li> </ul> <span>Option 2</span> <ul> <li>suboption 2-1</li> <li>suboption 2-2</li> <li>suboption 2-3</li> </ul> 

I need to move the mouse over the suboptions but the menu closes and i dont know how to tell to jquery that UL is part of menu group. Some idea for this?

Answer 1

No-one said you cannot alter the HTML dynamically using jQuery :)
So, yes, group your SPAN+UL into groups, and attach the hover function to your .group wrapper:

jsBin demo

$("span").each(function(){
  var ul = $(this).next("ul");
  $(this).add(ul).wrapAll("<div class='group'/>");
});

$(".group").hover(handleHover);

function handleHover() {
  $("span",this).toggleClass('selecc');
  $("ul",this).stop().slideToggle();
}