jQuery hide show id

Question

HTML

<ul id="menüü">  
            <li id="meist">  
                <p><a href="meist.html">Meist</a></p>  
            </li> </ul>


<div id="submenu">
    <ul id="submeist">
        <li class="asi1">
            Asi 1
        </li>
        <li class="asi2">
            Asi 2
        </li>
        <li class="asi3">
            Asi 3
        </li>
    </ul>
</div>

CSS

#meist {  
        display: inline;
        float:left;
        width:180px;  
        height:50px;  
        color:#191919;  
        text-align:center;  
        overflow:hidden; 
        background:#990000;
        -moz-border-radius-top-left: 50px;
        border-top-left-radius: 50px;

    } 

#submeist
    {   
        font-size:12px;
        display:none;
    }

    #submeist .asi1
    {
        margin-left:70px;
    }

        #submeist .asi2
    {
        margin-left:25px;
    }

    #submeist .asi3
    {
        margin-left:25px;
    }

JS

$("#meist").mouseout(function () { 
    $("#submeist").hide();
    return false; 
});

$("#meist").mouseenter(function () { 
    $("#submeist").show();
    return false; 
});

I am here again to learn and find out how to show "submeist" when mouse hovers "meist". I have learned some VERY basics of jQuery, but somehow this code is not working. Help is much appreciated and if possible than lots of comments :)

Solution 1

You should use mouseleave instead of mouseOut as mouseOut will get triggered even if you hover over the a or p which is inside #meist.

$(function(){
    $("#meist").mouseleave(function () { 
        $("#submeist").hide();
        return false; 
    });

    $("#meist").mouseenter(function () { 
        $("#submeist").show();
        return false; 
    });
});

Demo

From Doc

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.

And the event pair is:

mouseover-mouseout

mousenter-mouseleave (hover)

Solution 2

The code seems alright you need to put in document.ready on ensure dom elements availability to script. I used mouseleave instead of mouseout and flicker in finished as mouseout is triggered event if you go to p or a .

Live Demo

$(document).ready(function(){    
 $("#meist").mouseleave(function () { 
    $("#submeist").hide();
       return false; 
    });

   $("#meist").mouseenter(function () { 
      $("#submeist").show();
      return false; 
   });
});

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts, Reference

Solution 3

Change mouseenter to mouseover, so when you hover the link it won't hide the element.

You cannot bind events on elements that doesn't exist, unless you use jQuery delegates.

$(document).on("mouseover", "#meist", function(e) {
    // code
});

Or you can wait until the DOM to load and then bind the events. There is a jQuery function for that called .ready

$(document).ready(function() { /* code */ });
$(function() { /* code */ }); // this is an alias

And it will also work if you place your <script> that at the end of your page.

Comments

[BrunoLM]

You could create an example at jsFiddle. I copied and pasted your code and it is working. What is your question? jsfiddle.net/ULVqk

[David Starkey]

@BrunoLM Not working in Firefox 20, what browser were you using?

[VonHornmeister]

The code work, but there is some wrong with it, when ever I hover over the box, it works like a charm, but as soon as I hit the text and the cursor changes, the submenu text starts flickering. It's the same in the DEMO too

[Adil]

I use mouseleave instead of mouseout and flickering is gone, can you have a look?