CODEWITHSUNDEEP
jqueryhtml
Erick Garcia
Erick Garcia

Reputation: 842

Showing/Hiding <div> Based on <li>.hover()

I'm making a menu that would display via .slideDown() a <div id="menuDiv"> based on which ID specified <li> of <div id="menuDiv">'s <ul> the cursor is under. Additionally, the <div id="menuDiv"> should .slideUp() when the cursor goes out of <div id="menuContainer"> except when the cursor goes down over the <div id="menuDiv"> itself.

I have this markup:

   <div id="menuContainer">
   <!-- this is styled to be your standard CSS <ul> menu (<ul>'s list-style: none; <li> float: right) -->
        <ul>
            <li id="overSlide1"><a href="#1" class="linkClass">Alpha</a></li>
            <li id="overSlide2"><a href="#2" class="linkClass">Beta</a></li>
            <li id="overSlide3"><a href="#3" class="linkClass">Gamma</a></li>
            <li id="overSlide4"><a href="#4" class="linkClass">Theta</a></li>
        </ul>
    </div>
    <div id="menuDiv">
    <!-- This is position right under the <div id="menuContainer"> via CSS -->
    </div>

and did this for the Jquery:

$(document).ready(function(){
    $("#overSlide1").hover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    }, function(){

    });

    $("#overSlide2").hover(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    }, function(){

    });

    $("#overSlide3").hover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    }, function(){

    });

    $("#menuDiv").hover(function(){

    }, function(){
        $(this).slideUp(75);
    });
});

I'm having problems with "except when the cursor goes down over the <div id="menuDiv"> itself".

Upvotes: 1

Views: 494

Answers (1)

Brian Patterson
Brian Patterson

Reputation: 1625

Try This

$(document).ready(function(){
    $("#overSlide1").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide1").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };
 $("#overSlide2").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide2").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

 $("#overSlide3").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide3").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

 $("#overSlide4").mouseover(function(){
        $("#menuDiv").slideDown(250, function(){
        });
    };

    $("#overSlide4").mouseout(function(){
        $("#menuDiv").slideUp(250, function(){
        });
    };

});

This might be a little buggy, jquery is wierd sometimes doesn't work as expected. If this doesn't work for you, there are other ways, this was just the simplest way compared to what you already had. Just let me know and I will help more.

Upvotes: 1

Related Questions