CSS Наведите указатель мыши на родительский список Только для объекта

Question

Итак, у меня есть несколько вложенных списков (только на один уровень), и у меня возникают проблемы с функцией CSS: hover. Я только хочу, чтобы зависание применимо к родительскому классу, но я не могу понять, что он вышел.

Вот мой CSS

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

А вот пример одного из списков.

<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> 

Проблема в том, что изображение в элементах списка Uno и Dos также зависает. ! :(

Помогите пожалуйста Большое спасибо

Answer 1

Вы можете использовать селектор дочерних >, как это:

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

Это не в вашем вставленном коде, так что это предполагает, что ваш <ul> немедленно обернут элементом class="listblock", если есть что-то еще между ними просто добавьте его в том же формате. Это выбирает только прямой ребенка <il> это прямой ребенок из <ul> это прямой из .listbox, поэтому он не будет работать на <li> элементов дальше вниз.

Answer 2

Вы можете добавить что-то вроде:

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