Question

I have a few <span> elements inside of a <div>. When you hover over one <span> it should highlight all the preceding<spans> and the hovered <span>.

How can I do this using just CSS or jQuery?

jsFiddle example

I suspect a jQuery answer will do the following, but I can’t find functions for 1 & 2.

1. Get the child # of the currently hovered element
2. Select all the children up to that number
3. Add the ‘hover’ class to them

Answer 1

You can do this with jQuery :

$('span').hover(​​​​​function(){
    $(this).prevAll().addClass('hover'); 
},function(){
    $(this).prevAll().removeClass('hover'); 
});​

Demonstration

This uses prevAll to select all the preceding spans of the same div. No need to use the index of the current element but you could have got it with the index function and then you would have used the lt selector ($(this).sibblings(":lt("+$(this).index+")")). Of course prevAll is much simpler.

As noticed by elclarns, this can be shortened in

$('span').hover(function(){
    $(this).prevAll().toggleClass('hover'); 
});​