Question

我有一个包含li元素的列表，我希望鼠标悬停，分别悬停整行。在示例here中，我设法悬停但只是<span>。由于我在同一行中有2个<span>，因此有两个不同的悬停区域。

如何将整条线悬停在鼠标悬停上？

Answer 1

试试这个：

li:hover>:not(ul) {
    background: #E0F0FF;
}

这将基于以下颜色：悬停在li上，而不是基于悬停在跨度上。但另一方面，您不想为子列表着色，因此请使用：not（）。

Answer 2

将span换入另一个span，并为其显示block。将:hover应用于此包装span：

示例HTML：

<li>
    <span class="hi">
        <span> f1.txt</span>
        <span class="pull-right">Size: 0.04 kb </span>
    </span>
</li>

示例CSS：

span.hi {
    display: block;
}

span.hi:hover {
    ...
}