显示/隐藏脚本不起作用

Question

我不知道我的脚本有什么问题。如果我徘徊它，为什么。内幕消失？如果在内部悬停，我希望它可见。

<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

嵌套子工作消失，因为有li.thumb和ul.inside元素之间的间隙。当鼠标在这个区域子菜单隐藏，当然因为.thumb不再徘徊，并且绝对定位了.inside。

要解决它，你可以降低子菜单的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 2

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

所以添加这个类：

.thumb { 
    height:100px 
} 

Working Fiddle

Answer 3

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

如果你想有一个jQuery的修复，这会为你做它。只是改变了触发隐藏/显示的元素