显示/隐藏脚本不起作用

Question

我不知道我的剧本有什么问题。如果我徘徊它，为什么.inside会消失？如果是.inside徘徊，我希望它是可见的。

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

这里有一些jquery：

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

使用http://jsfiddle.net/0s7gd6g3/

Answer 1

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

如果你想要一个jQuery修复，这将为你做。刚刚更改了触发隐藏/显示的元素

Answer 2

嵌套子菜单消失，因为li.thumb和ul.inside元素之间存在差距。当鼠标位于此区域时，子菜单会隐藏，因为.thumb不再悬停，.inside绝对定位。

要修复它，您可以减少子菜单的top位置，而是使用padding-top值垂直移动：

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

演示： http://jsfiddle.net/0s7gd6g3/8/

在这种情况下你也不需要javascript，因为它是简单而有效的CSS用例：

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

Answer 3

你需要增加拇指div的高度，这样当你悬停时它仍然存在，否则它将被限制在那个空间。

所以添加这个类：

.thumb {
    height:100px
}

Working Fiddle