zobraziť iba tie divy, kde robím presunutie myši - javascript, jquery, css

Ako zobraziť ikonu na danom slove, kde sa nachádzam.

Tu je housle , momentálne, keď prejdem myšou na dieťa <li> potom rodič <ul> ikona sa tiež zobrazuje ...

Čo chcem je:

Ak ukážem myšou na ľubovoľný riadok, mala by sa zobraziť iba 1 a zodpovedajúca ikona, nemala by sa zobraziť ikona rodiča.

Pozrite si časť husle vedieť viac.

Prosím pomôžte! Je možné to vyriešiť pomocou Jquery?

Vyzerá to ako:

Použil som tento 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; }

odpovede:

Trik je v >, li > img vyberie iba priame deti, ktoré sú obrázkami:

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

V tomto príklade pri umiestnení kurzora myši na li 4-> li 1:
li:hover img vyberie všetky obrázky kdekoľvek v tejto knižnici (alebo ich deťoch atď.)
li:hover > img vyberie všetky obrázky, ktoré sú priamymi potomkami, nie tí hlbší, ako nový ul / li.