Javascript 只显示我鼠标悬停的那个div

如何在我悬停的单词上显示图标

，当前，如果我将鼠标移到子对象上，则父对象图标也将显示

我想要的是： 如果我将鼠标悬停在任何一行上，则只应显示1个相应的图标，而不应显示父图标

请看地图

请帮忙！可以用Jquery解决吗

它看起来像：

我用了这个css

诀窍在于>，li>img只选择img的直接子级：

ul img{
    display: none;
}
li:hover >img{
    display: inlineblock
}
<ul>
    <li>text 1 <img src="img.jpg" alt="img1" /></li>
    <li>text 2 <img src="img.jpg" alt="img2" /></li>
    <li>text 3 <img src="img.jpg" alt="img3" /></li>
    <li>
        <ul>
            <li> 4 1 <img src="img.jpg" alt="img41" />
            <li> 4 2 <img src="img.jpg" alt="img42" />
            <li> 4 3 <img src="img.jpg" alt="img43" />                
        </ul>
    </li>
</ul>

在本例中，将鼠标悬停在li 4->li 1上： li：悬停img选择此li中任何位置的所有img或其子项，等等

---

li:hover>img选择所有直接继承的img，而不是更深的img，如新的ul/li。

您的小提琴有一个未匹配的标记。除此之外，css应该可以工作。哦，我明白了，它是嵌套的。摆弄atm…无论如何，没有办法用css选择父对象only@circusdei不知道为什么它被否决了…请查看我的更新php代码，我如何才能改进它以完成我的工作！这都是关于css，而不是php。这不是一个网站，你得到定制的解决问题，我们给你的问题，在一种方式，iy可以解决它

ul img{
    display: none;
}
li:hover >img{
    display: inlineblock
}
<ul>
    <li>text 1 <img src="img.jpg" alt="img1" /></li>
    <li>text 2 <img src="img.jpg" alt="img2" /></li>
    <li>text 3 <img src="img.jpg" alt="img3" /></li>
    <li>
        <ul>
            <li> 4 1 <img src="img.jpg" alt="img41" />
            <li> 4 2 <img src="img.jpg" alt="img42" />
            <li> 4 3 <img src="img.jpg" alt="img43" />                
        </ul>
    </li>
</ul>