Jquery - Mouseenter and Mouseleave

Question

I have the following so far:

$("#main-link-bottom-about").mouseenter(function() {
    $("#main-about-hover").slideDown("slow");
});

$("#main-about-hover, #main-link-bottom-about").mouseleave(function() {
    $("#main-about-hover").slideUp("slow");
});

This is basically a drop down menu when you hover over links. What I want to achieve is that when you hover over #main-link-bottom-about, #main-about-hover slides back up when the mouse leaves either #main-about-hover, #main-link-bottom-about.

However, the problem is, if the mouse leaves #main-about-hover onto #main-link-bottom-about, #main-about-hover slides up where as I don't want this to happen.

Is it possible to add this exception or am I going about this the wrong way?

EDIT::

HTML:

<!-- Navigation Links Bottom -->

<div id="main-links-bottom" class="shadow">

    <a href="index.php" id="main-link-bottom-about" class="main-infotext-bottom">About</a>

    <a href="#" class="main-infotext-bottom">Information</a>

    <a href="#" class="main-infotext-bottom">Services</a>

    <a href="#" class="main-infotext-bottom">Support</a>

    <a href="#" class="main-infotext-bottom">Careers</a>

    <a href="#" class="main-infotext-bottom">Mobile Site</a>

    <a href="#" class="main-infotext-bottom">Site Map</a>

    <a href="#" class="main-infotext-bottom" onclick="alert('Coming Soon!')">Mobile App</a>

    <div id="main-links-bottom-hover">

        <div id="main-about-hover">

            <div id="main-about-div">

                <li id="lnk1" class="about-lnk"><a href="#">Contact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">Technology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

        </div>

    </div>

</div>

Answer 1

A good starting point is this. Make the navigation prettier than the example (put it under each category), but this will work.

jsfiddle: http://jsfiddle.net/xtBXj/2/

HTML:

<!-- Navigation Links Bottom -->
<input id="test"></input>
<div id="main-links-bottom" class="shadow">

    <a href="index.php" id="main-link-bottom-about" class="main-infotext-bottom">About</a>

    <a href="#" class="main-infotext-bottom">Information</a>

    <a href="#" class="main-infotext-bottom">Services</a>

    <a href="#" class="main-infotext-bottom">Support</a>

    <a href="#" class="main-infotext-bottom">Careers</a>

    <a href="#" class="main-infotext-bottom">Mobile Site</a>

    <a href="#" class="main-infotext-bottom">Site Map</a>

    <a href="#" class="main-infotext-bottom" onclick="alert('Coming Soon!')">Mobile App</a>

    <div id="main-links-bottom-hover">

        <div id="main-about-hover">

            <div class="hovers" id="About">

                <li id="lnk1" class="about-lnk"><a href="#">Contact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">Technology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

          <div class="hovers" id="Information">

                <li id="lnk1" class="about-lnk"><a href="#">InfoContact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">InfoTechnology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

                    <div class="hovers" id="Services">

                <li id="lnk1" class="about-lnk"><a href="#">ServInfoContact</a></li>
                <li id="lnk2" class="about-lnk"><a href="#">ServInfoTechnology</a></li>
                <li id="lnk3" class="about-lnk"><a href="#">Coverage</a></li>
                <li id="lnk4" class="about-lnk"><a href="#">Environment</a></li>
                <li id="lnk5" class="about-lnk"><a href="#">T&amp;C's</a></li>
                <li id="lnk6" class="about-lnk"><a href="#">Refund Policy</a></li>

            </div>

        </div>

    </div>

</div>

JS:

$(".hovers").hide();

//$("#main-links-bottom-hover").hide();

$(".main-infotext-bottom").mouseenter(function() {
    $(".hovers").slideUp();
    var m = $(this).html();
    $("#test").val(m);
    $("#" + m).slideDown();
});


$("#main-links-bottom").mouseleave(function() {
    $(".hovers").slideUp();
});

Answer 2

You'd be better off nesting the link and the hover menu within the same element. This would allow you to bind the mouse events to a single element. Also, consider using classes instead of DOM IDs, so you will be able to easily add hover menus to other links as necessary.

For example:

HTML

<div id="main-links-bottom">
    <div class="main-link-container">
        <a href="index.php" class="main-infotext-bottom">About</a>
        <div class="hover-menu">
             <a href="#">Contact</a>
             <a href="#">Technology</a>
             <a href="#">Coverage</a>
             <a href="#">Environment</a>
             <a href="#">T&amp;C's</a>
             <a href="#">Refund Policy</a>
        </div>
    </div>
    <div class="main-link-container">
         <a href="#" class="main-infotext-bottom">Information</a>
    </div>
    ...
</div>

The JS can now be fairly simple, and even simpler with slideToggle():

Javascript

 $('#main-links-bottom .main-link-container').bind('mouseenter mouseleave',
      function() {
          $(this).find('.hover-menu').slideToggle('slow');
      }
 );

Answer 3

Try this code

$("#main-link-bottom-about, #main-links-bottom-hover").mouseenter(function () {
  $("#main-about-hover").stop().slideDown("slow");
});

$("#main-about-hover, #main-link-bottom-about").mouseleave(function () {
  $("#main-about-hover").stop().slideUp("slow");
});

Check the JSFiddle demo here