javascript - Jquery rollover but not the same child? -
what want when rollover .mainmenu .submenu fade in, problem both of them not parent , child related, how can make .submenu remain visible when move cursor .mainmenu .submenu?
http://codepen.io/vincentccw/pen/lnvje
my html: ////////////////////////////////////////////// <div class="mainmenu">this text</div> <div class="submenu">this text2</div> ////////////////////////////////////////////// js: ////////////////////////////////////////////// $( document ).ready(function() { $(".mainmenu, .submenu").mouseenter(function(){ $(".submenu").stop(true,true).slidetoggle(); console.log('slide down'); }).mouseleave(function(){ $(".submenu").stop(true,true).slidetoggle(); console.log('slide up'); }); }); ////////////////////////////////////////////////
$(document).ready(function () { $(".mainmenu").mouseenter(function () { $(".submenu").stop(true, true).slidetoggle(); // console.log('slide down'); }).mouseleave(function (e) { if (e.relatedtarget.classname != "submenu") $(".submenu").stop(true, true).slidetoggle(); // console.log('slide up'); }); $(".submenu").mouseleave(function (e) { $(".submenu").stop(true, true).slidetoggle(); // console.log('slide up'); }); });
Comments
Post a Comment