jquery - 将鼠标悬停在 jquery 上以查看子级元素

Question

平铺 4 子 <ul>将在 Tile 4 悬停时可见 <li>当我快速将指针移动到 sub <ul> 时它正在显示。如果我使用 jQuery 缓慢移动到子级别，如何避免隐藏子 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

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

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

这是 JsFiddle link .

例如

代替:

.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

希望对您有所帮助。