CSS Hover sur la liste parente Item only

Question

J'ai donc quelques listes imbriquées (seulement un niveau profond) et j'ai des problèmes avec la fonctionnalité CSS: hover. Je veux seulement que le hover s'applique à la classe parente, mais je ne peux pas le comprendre.

Voici mon CSS

<style type="text/css" media="screen"> 
.listblock li img { 
    visibility: hidden; 
} 
.listblock li:hover img { 
    visibility: visible; 
} 
</style> 

Et voici un échantillon d'une des listes.

<ul> 
    <li>One <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li> 
    <li>Two <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a> 
     <ul> 
      <li>Uno<a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li> 
      <li>Dos <a href="#"><img src="img/basket.png" height="16" width="16" class="buy" /></a></li> 
     </ul> 
    </li> 
    <li>Three <a href="#"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Outbound Links', 'Amazon');"/></a></li> 
</ul> 

Le problème est que l'image dans les éléments de liste Uno et Dos flotte également. ! :(

Aide s'il vous plaît Merci beaucoup

Answer 1

Vous pouvez utiliser le sélecteur d'enfant >, comme ceci:

.listblock > ul > li:hover img { 
    visibility: visible; 
} 

Ce n'est pas dans votre code collé, donc cela suppose que votre <ul> est immédiatement enveloppé par un article class="listblock", s'il y a quelque chose d'autre entre il suffit de l'ajouter avec le même format. Ce ne sélectionne que la directe enfant <il> qui est un enfant direct d'un <ul> qui est une directe de .listbox, il ne fonctionnera pas sur les éléments <li> plus bas.

Answer 2

Vous pouvez ajouter quelque chose comme:

.listblock li:hover li img { 
    visibility: hidden; 
}