顯示/隱藏腳本不起作用

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的修復，這會爲你做它。只是改變了觸發隱藏/顯示的元素