I’m using jQuery to create a simple, but large dropdown menu. I have some questions redarding this and hoping to get some help.
First, when I hover with the mouse over the link ‘meny_1’ with the mouseover() function the submenu ‘undermeny_a’ displays with the show() function. The submenu is inside a div called ‘undermeny_1’. With mouseout() function the div is removed. But if I divide that div into other divs, the mouseout() function will not work. It’s like it’s not detecting the main div ‘undermeny_1’ any more? I wonder how to solve this?
Second, I wonder if there are any alternative to use show() and hide(). I want the div element to be in the background above the pages other div element but not visible until i hover the mouse above the link ‘meny_1’? In plain javascript I used to use visibility or hidden, something that could be done with jQuery? Hide something without remove the element? Preciate some help. Thanks!
$(document).ready(function() {
$("#meny_1").mouseover(function(){
$("#underMeny_1").show();
});
$("#underMeny_1").mouseout(function(){
$("#underMeny_1").hide();<br/>
});<br/>
});
In regards to the mouse events, the jQuery API for mouseleave() shows the difference between mouseleave() and mouseout() that might help you out.
In essence, the mouseenter() / mouseleave() events trigger when the mouse enters or leaves the bounds of the element. Where the mouseover() / mouseout() events trigger whenever the mouse moves from one
<div>to another.If I understand your visibility issue, show() and hide() can work the same was as you did before hide(0) will hide the element immediately. Is there a different effect you wanted?