Использование: hover псевдо-класса во вложенных списках - PullRequest
Новая
       1

Использование: hover псевдо-класса во вложенных списках

2 голосов
/ 21 июня 2011

Я пытаюсь получить эффект добавления определенных дополнительных значений в элементы списка при их наведении.Я очень близок, но при использовании вложенных списков родитель думает, что он находится в поиске так же, как и ребенок.

Это мой простой контрольный пример.Желаемый результат заключается в том, что каждый элемент будет показывать промежуток времени, если и только если он будет отображен.При наведении указателя мыши на «Тест 5.3» НЕ должно получаться «Тест 5» с показанным диапазоном. 

<!DOCTYPE HTML>
<html>
<head>
<title>Testing list :)</title>
<style type="text/css">
li span {
    visibility: hidden;
}
li:hover > span {
    visibility: visible;
}
</style>
</head>

<body>
<ul>
    <li>Test 1<span> - Edit</span></li>
    <li>Test 2<span> - Edit</span></li>
    <li>Test 3<span> - Edit</span></li>
    <li>Test 4<span> - Edit</span></li>
    <li>Test 5<span> - Edit</span>
        <ul>
            <li>Test 5.1<span> - Edit</span></li>
            <li>Test 5.2<span> - Edit</span></li>
            <li>Test 5.3<span> - Edit</span></li>
            <li>Test 5.4<span> - Edit</span></li>
            <li>Test 5.5<span> - Edit</span></li>
        </ul>
    </li>
    <li>Test 6<span> - Edit</span></li>
    <li>Test 7<span> - Edit</span></li>
    <li>Test 8<span> - Edit</span></li>
    <li>Test 9<span> - Edit</span></li>
</ul>
</body>
</html>

Ссылка на версию в Интернете для экономии при копировании вышеупомянутого: test.html

Спасибо

Ответы [ 2 ]

3 голосов
/ 21 июня 2011

См .: http://jsbin.com/ihole5/3/

Я обманул и изменил ваш HTML с: 

<li>Test 1<span> - Edit</span></li>

, чтобы включить дополнительную упаковку span: (это немного изменилось по сравнению с моим первоначальным ответом) 

<li><span>Test 1<span> - Edit</span></span></li>

На этот раз CSS прост: 

li > span > span {
    visibility: hidden;
}
li > span:hover > span {
    visibility: visible;
}
0 голосов
/ 21 июня 2011

У вас неправильное представление о том, как: hover работает. Это применимо также ко всем родителям элемента - то есть вы не можете навести курсор на внутренний li, не наведя курсор на его родителя ul, а на то, что родители li, ul, вплоть до 1005 *.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...