CSS Hover только для родительского списка - PullRequest
Новая
       12

CSS Hover только для родительского списка

1 голос
/ 28 апреля 2010

Итак, у меня есть несколько вложенных списков (только на один уровень глубины), и у меня возникают проблемы с функцией 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 также зависает. (

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

Ответы [ 2 ]

2 голосов
/ 28 апреля 2010

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

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

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

1 голос
/ 28 апреля 2010

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

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