只顯示那些div我將鼠標懸停在哪里

Question

如何在我徘徊的單詞上顯示圖標。

這是小提琴 ，目前如果我將鼠標懸停在子<li>則父<ul>圖標也會顯示...

我想要的是：

如果我將鼠標懸停在任何行上，則僅應顯示1＆對應的圖標，而不應顯示父圖標。

請參閱小提琴以了解更多信息 。

請幫忙！ 有可能用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，而不是更深的img，例如新的ul / li。