javascript - 只显示我鼠标悬停的那些 div

Question

如何在我悬停的那些词上显示图标。

Here is the fiddle，目前如果我将鼠标悬停在 child 身上 <li>然后 parent <ul>图标也显示...

我想要的是:

如果我将鼠标悬停在任何行上，则只应显示 1 个对应的图标，而不应显示父图标。

请参阅fiddle to know more .

求助!可以用Jquery解决吗？

看起来像:

我用了这个css

 #project-div-id ul li { list-style: circle ; margin-top: 2px; width: 175px; }
 #project-div-id ul li img {list-style: circle ;  display: none; }
 #project-div-id ul li:hover img { display: inline; float: right; } 
 .add_btn,.del_btn,.edit_btn{
 padding-left: 10px; }

Answer 1

诀窍在于 >，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:hover img 选择此 li 中任何位置的所有 img(或其子项等)
li:hover > img 选择所有直接后代的 img，而不是更深层次的，例如新的 ul/li。