Javascript 嵌套Ul LI悬停隐藏显示元素jquery

在嵌套的ulli中，我需要在li悬停时显示编辑和更新链接。我有jquery代码为我做这件事。当我从上到下遍历时，Jquery工作得很好，但当我从下到上遍历时，它并没有按预期工作，并显示父li的隐藏div

我只想展示一下hover li的跨度。这是必需的

<ul id="tree">
<li><span>Mobile </span>&nbsp; <span class="links" style="display: none;">Hey Hi, YOu
    caught me!!!</span>
    <ul class="subItem">
        <li><span>GSM Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey Hi,
            YOu caught me!!!</span> </li>
        <li><span>Smart Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey
            Hi, YOu caught me!!!</span>
            <ul class="subItem">
                <li><span>Android Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey
                    Hi, YOu caught me!!!</span> </li>
                <li><span>Sabian Mobiles </span>&nbsp; <span class="links" style="display: none;">Hey
                    Hi, YOu caught me!!!</span> </li>
            </ul>
        </li>
        <li><span>Dual SIM Mobiles </span>&nbsp; <span class="links" style="display: none;">
            Hey Hi, YOu caught me!!!</span> </li>
    </ul>
</li>
<li><span>Watches </span>&nbsp; <span class="links" style="display: none;">Hey Hi, YOu
    caught me!!!</span>
    <ul class="subItem">
        <li><span>Chronograph Watches </span>&nbsp; <span class="links" style="display: none;">
            Hey Hi, YOu caught me!!!</span> </li>
        <li><span>Water Resistance </span>&nbsp; <span class="links" style="display: none;">
            Hey Hi, YOu caught me!!!</span> </li>
    </ul>
</li>
</ul>

这里是链接

打印$（此）时，我注意到， 如果同时选择内部列表和外部列表，请在选择器中更加具体：

$('#tree ul li').hover(function () {
   $("ul>li>span.links").hide();  

    $(this).find("span.links").first().show();
}, function () {
    $("ul>li>span.links").hide();
    $(this).find("span.links").first().hide();
});

---

我试过了，但没有成功：（您提到的代码没有选择第一个元素。确实如此，我没有完全测试我提出的代码，很抱歉应该提到这一点。但这基本上是一个选择器问题。您正在选择内部和外部列表。我已经更新了您的JSFIDLE并添加了level1类属性，因此事件将只在那些li元素上触发。）ho有一个level1类属性。同样，我只对第一项进行了测试。你应该能够从中找到答案。谢谢你jonas，但这正是我想要的。我想知道如何改进我的js代码。：）

$('#tree ul li').hover(function () {
   $("ul>li>span.links").hide();  

    $(this).find("span.links").first().show();
}, function () {
    $("ul>li>span.links").hide();
    $(this).find("span.links").first().hide();
});