how to hide a div on mouseleave from 2 divs in jquery?
jquery, jquery-hover, menu, mouseleave
Solution
You don't need javascript to do that: CSS solution.
Just add the submenu (`.drop_item`) as a child element to the trigger element (`.hover_item`) and add some CSS:
.drop_item { display: none; }
.hover_item:hover .drop_item { display: block; }
Problem
the question might be a bit wired but in other words i have a menu (see jsfiddle) when i hover over a div i get a drop down. when i mouseleave the drop down disappear. so far so good. the problem is that i want the menu to stay open if the mouse is hovering over the drop down also. ``` ex: if($elem).not(":hover"){..} ``` some code: ``` <div class="top_menu_item"> <div class="hover_item"> <a href="#">TEST</a> </div> <div class="drop_item" style="display: none;"> <div> <a href="#">My test</a> </div> <div class=""> <a href="#">Add test</a> </div> <div> <a href="#">Remove test</a> </div> </div> $(document).ready(function () { var elem = new Array(); var len = $(".hover_item").length; var i = 0; while (i < len) { elem[i] = $(".hover_item:eq(" + i + ")"); i = i + 1; } $.each(elem, function (key, val) { hoverFunc(val); }); }); function hoverFunc($elem) { $elem.hover(function () { if ($elem.next().is(":hidden")) { $elem.next().slideDown("fast"); } }); $elem.mouseleave(function (e) { // here should be : if the mouse is not hovering over the dropdown, then $elem.next().slideUp("fast"); }); $elem.next().mouseleave(function (e) { $elem.next().slideUp('fast'); }); } ``` if someone can re-Fraze my question to say what i mean please do so. thanks