CODEWITHSUNDEEP
jqueryhideshow
user4394417
user4394417

Reputation:

Show/hide script does not work

I dont know whats wrong with my script. Why .inside disappear if I hovering it? I want it to be visible if is .inside hovered. 

<ul class="drop">
    <li class="thumb">
        Arival
        <ul class="inside">
            <li>První</li>
        </ul>
    </li>
</ul>

Some jquery here:

$("li.thumb").hover(
    function() { $(this).children().show(); },
    function() { $(this).children().hide(); }
);

Working on http://jsfiddle.net/0s7gd6g3/

Upvotes: 1

Views: 96

Answers (3)

Andy Holmes
Andy Holmes

Reputation: 8047

$(".drop").hover(
    function() {
        $(this).find('.inside').show();
    }, function() {
        $(this).find('.inside').hide();
    }
);

If you want a jQuery fix, this will do it for you. Just changed the element that triggers the hide/show

Upvotes: 1

V31
V31

Reputation: 7666

You need to increase the height of the thumb div so that when you hover it remains there otherwise it will be confined to that space.

So add this class:

.thumb {
    height:100px
}

Working Fiddle

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Nested submenu disappears because there is a gap between li.thumb and ul.inside element. When the mouse is over this area submenu hides of course because .thumb is no longer hovered and .inside is positioned absolutely.

To fix it you can decrease top position of the submenu and instead move it vertically with padding-top value:

.inside {
    border: 1px white solid;
    display: none;
    position: absolute;
    width: 190px;
    top: 37px;
    left: -2px;
    z-index: 10;
}

Demo: http://jsfiddle.net/0s7gd6g3/8/

Also you don't really need javascript in this case as it's simple and more effective CSS usecase:

li.thumb:hover .inside {
    display: block;
}

Upvotes: 0

Related Questions