Mouse leave jquery issue

Question

I have this navigation menu, let's say Black that has a class of testClass.

When you hover it, the container itself will show (slide down).

The problem is, when I mouse hover from the menu to the container itself with the same class as the navigation that's been shown, the container slide up (hide the contents).

What I want to happen is, when I mouse hover to black the container will show up, when I mouse hover to the container that has the same class with the navigation menu, the container itself will remain shown until I mouse leave outside of a certain class which is testClass

Hope you guys understand it.

Here's a JSFiddle of it.

and this is the code that I'm using since I've been asked to put a code by SO

<div class="body">
    <ul id="teaTypesMenu">
        <li name="black-tea-nav" class="testClass">
            Black
        </li>
    </ul>

    <div id="black-tea-nav" class="tempMenuContainer testClass">
        This is some awesome text that you never heard of. D:
    </div>
</div>

jQuery(document).ready(function($) {

$("#teaTypesMenu li").mouseenter(function() {

    //Get name attribute of li element
    var container_name = $(this).attr("name");
    //Show Element
    $("#" + container_name).slideDown(500);
});

$(".testClass").mouseleave(function(){
    //Hide Element
    $(".tempMenuContainer").slideUp();
});

});

Answer 1

Wrap something around it, so that the .mouseover() isn't restricted to the tea's name. It could look like this:

HTML

<ul class="tea-list">
    <li>
        <div class="tea">Black</div>
        <div class="more-info">I love it!</div>
    </li>
</ul>

CSS

.tea-list{
    width:100%;
    list-style:none;
    display:block;
    padding:0;
    margin:0;
}

.tea-list li{
    cursor:help;
}

.tea {
    background:silver;
    padding:10px 15px;
    margin:0;
}

.more-info{
    display:none;

    background:black;
    color:white;
    padding:10px 15px;
    margin:0;
}

JS

$(document).ready(function(){
    $('li').mouseover(function(){
        $(this).children('.more-info').slideDown(500);
    }).mouseleave(function(){
        $(this).children('.more-info').slideUp(200);        
    })
})

jsfiddle.net/jLpHE/3/

Hope this helps - cheers!

Answer 2

see DEMO

add a :eq(1) to your class selector for select secend .testClass and etc

$(".testClass:eq(1)").mouseleave(function(){
//Hide Element
$(".tempMenuContainer").slideUp();

Answer 3

You need to use a timer to give a little delay when the mouse leaves the li so that the user could get to the target element - This is if you cannot modify the markup

<div class="body">
    <ul id="teaTypesMenu">
        <li name="black-tea-nav">
            Black
        </li>
    </ul>

    <div id="black-tea-nav" class="tempMenuContainer testClass">
        This is some awesome text that you never heard of. D:
    </div>
</div>

then

jQuery(document).ready(function ($) {

    $("#teaTypesMenu li").hover(function () {
        var name = $(this).attr("name"),
            $target = $('#' + name);
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).slideDown(500);
    }, function () {
        var name = $(this).attr("name"),
            $target = $('#' + name);
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $(".testClass").hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).slideUp();
    });

});

Demo: Fiddle

Answer 4

Remove the test class from and the same script will work

<div class="body">
    <ul id="teaTypesMenu">
        <li name="black-tea-nav" class="">
            Black
        </li>
    </ul>
</div>

alternately if you don't want to remove the class then you may change the script to

$(".tempMenuContainer").mouseleave(function(){
    //Hide Element
    $(".tempMenuContainer").slideUp();
});