Question

我试图获得在列出项目时添加某些额外值的效果。我非常接近，但是当使用嵌套列表时，父母认为它和孩子一样徘徊。

这是我的简单测试用例。期望的结果是，只有当它悬停时，每个项目才会显示跨度。将鼠标悬停在'测试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

由于

Answer 1

请参阅： 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;
}

Answer 2

你对如何做出误解：悬停有效。它也适用于元素的所有父元素 - 也就是说，您不能将鼠标悬停在内部li上而不悬停在其父ul上，父母li，{{1} }，一直到ul。

在嵌套列表中使用：hover伪类

2 个答案: