li hover the whole line horizontally

Question

I have a list with li elements and I want on mouseover, to hover the entire line separately. In the example here, I managed to hover but just the <span>. As I have 2 <span>s in the same line, there are two different hover areas.

How can I hover the whole line on mouseover?

Answer 1

Wrap your spans in another span and give it a block display. Apply :hover to this wrapping span:

Example HTML:

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

Example CSS:

span.hi {
    display: block;
}

span.hi:hover {
    ...
}

Demo Fiddle: http://jsfiddle.net/abhitalks/fnbTg/4/

Answer 2

Try this:

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

This will color based on :hover on the li, not based on hover on the span. But on the other hand, you don't want to color the sublist, so use :not().

Demo: http://jsfiddle.net/QkaYJ/1/