将鼠标悬停在jquery上以查看子级别项目

Question

当我快速将指针移动到它显示的子<ul>时，在Tile 4 <li>上悬停时，将显示Tile 4 sub <ul>。如果我使用jQuery缓慢移动到子级别，我怎么能避免隐藏sub ul？

https://jsfiddle.net/id10922606/8qkt6b07/22/

$(document).ready(function () {
 //Fade effect
    $(".tile_nav  li").hover(function () {
        $(this).siblings().css("opacity", .5);
				
		
    }, function () {
        $(this).siblings().css("opacity", 1);
		
    });
});

.tile_nav {
    width:241px;
    list-style:none;
}
.tile_nav li {
    width:60px;
    height:60px;
    float:left;
    list-style:none;
    background:#ccc;
    margin:0 1px 1px 0;
}
.tile_nav li a {
    width:60px;
    height:60px;
    display:block;
}
.tile_subnav li {
    background:red;
}
.tile_nav li ul {
    display:none;
    margin:2px;
}
.tile_nav li:hover ul {
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tile_nav">
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile</a></li>
    <li><a href="#">Tile 4</a>
       <ul class="tile_subnav">
            <li><a href="#">Sub 1 of Tile 4</a>
            </li>
            <li><a href="#">Sub 2 of Tile 4</a>
            </li>
        </ul>
    </li>
</ul>

Answer 1

保证金是你的问题。当指针越过空白区域时，悬停结束。尝试没有边距和一些边框。

Answer 2

您可以通过确保鼠标指针永远不会离开触发li（及其子ul）来实现。为此，请从子2px中删除ul的上边距，否则元素之间有2px空间，既不属于父li也不属于子{{1} }}

ul

https://jsfiddle.net/8qkt6b07/23/

编辑：这是一个更好的版本，更容易定位subnav和一些奇特的过渡动作：

https://jsfiddle.net/8qkt6b07/41/

Answer 3

获得所需的结果。设置位置：相对于li和位置：子菜单上的绝对值。

我更新了你的css：

.tile_nav { width:241px; list-style:none; }
.tile_nav li { width:60px; height:60px; float:left; list-style:none; margin:0 1px 1px 0; background:#ccc; position: relative;}
.tile_nav li a { width:60px; height:60px; display:block;  }
.tile_subnav li { background:red;}
.tile_nav li ul {display:none; position: absolute; top: 62px;}
.tile_nav li:hover ul {display:block;}

Answer 4

即使没有 jquery ，您也可以这样做。

最简单的方法是以margin: 2px;样式将border: 2px solid transparent;更改为.tile_nav li ul。

这是JsFiddle link。

<强> E.g。

代替：

.tile_nav li ul {
    display:none; 
    margin: 2px;
}

将其更改为：

.tile_nav li ul {
    display:none; 
    border: 2px solid transparent;
}

顺便说一下，我发现第一项旁边的子菜单列表存在问题。如果将光标缓慢移动到第一个项目旁边的子菜单列表，子菜单列表将消失。

要解决此问题，请尝试添加此css ：

.tile_nav li ul li {
    border-top: 1px solid transparent;
    margin: 0;
}

动画示例：JsFiddle link

希望它有所帮助。