only show those div where i do mouse-over

Question

How to show icon on those word where i hover.

Here is the fiddle , currently if i mouse over on child <li> then parent <ul> icon is also showing...

What i want is:

If i mouse-over on any row then only 1 & corresponding icon should show, it should not show parent icon.

Please see the fiddle to know more.

Please help! Is it possible to solve with Jquery?

It looks like:

I used this 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

The trick is in the >, li > img selects only direct children that are img's:

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>

In this example, on hover on li 4->li 1:
li:hover img selects all img's anywhere in this li (or it's children, etc)
li:hover > img selects all img's that are direct descendants , not the ones deeper, like a new ul/li.