css - li 水平悬停整条线

Question

我有一个列表 li元素，我想在鼠标悬停时，分别悬停整行。 在示例中 here ，我设法盘旋但只是 <span> .因为我有 2 <span>在同一行中，有两个不同的悬停区域。

如何在鼠标悬停时将整行悬停？

Answer 1

将您的 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 {
    ...
}

演示 fiddle :http://jsfiddle.net/abhitalks/fnbTg/4/