pokazuj tylko te div, w których wykonuję kursor myszy - javascript, jquery, css

Jak wyświetlić ikonę na tym słowie, na którym unoszę kursor.

Oto skrzypce , obecnie jeśli najecham myszką na dziecko <li> następnie rodzic <ul> ikona pokazuje również ...

Chcę to:

Jeśli najedziemy myszką na dowolny wiersz, to pokaże się tylko 1 i odpowiadająca mu ikona, nie powinna ona pokazywać ikony rodzica.

Zobacz majstrować, aby dowiedzieć się więcej.

Proszę pomóż! Czy można rozwiązać za pomocą Jquery?

To wygląda jak:

Użyłem tego 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; }

Odpowiedzi:

Sztuką jest >, li > img wybiera tylko bezpośrednie dzieci, które są img:

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>

W tym przykładzie po najechaniu kursorem na li 4-> li 1:
li:hover img zaznacza wszystkie obrazy w dowolnym miejscu w tym li (lub to dzieci itp.)
li:hover > img wybiera wszystkie obrazy, które są bezpośrednimi potomkami, a nie te głębsze, jak nowe ul / li.