Select all preceding children of the same parent

[Caroline_New_Mexico]

I have a few \[code\]<span>\[/code\] elements inside of a \[code\]<div>\[/code\]. When you hover over one \[code\]<span>\[/code\] it should highlight all the preceding\[code\]<spans>\[/code\] and the hovered \[code\]<span>\[/code\]. How can I do this using just CSS or jQuery?jsFiddle exampleI suspect a jQuery answer will do the following, but I can't find functions for 1 & 2.[*]Get the child # of the currently hovered element[*]Select all the children up to that number[*]Add the 'hover' class to them