只显示我做鼠标的那些div

Question

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

Here is the fiddle ，目前如果我将鼠标移到孩子<li>上，那么父<ul>图标也会显示...

我想要的是：

如果我在任何一行鼠标悬停，那么只有1＆amp;应显示相应的图标，不应显示父图标。

请参阅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只选择了直接的儿童：

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-＆gt; li 1：
上 li:hover img选择此li中的所有img（或其子女等） li:hover > img选择所有直接后代的img，而不是更深层次的img，就像新的ul / li一样。