JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul>
    <li>1901 x</li>
    <li>1902 x</li>
    <li>1903 x</li>
    <li>1904 x</li>
    <li>1905 x</li>
    <li>1906 x</li>
    <li>1922 x</li>
    <li>1923 x</li>
    <li>1924 x</li>
    <li>1925 x</li>
    <li>1926 x</li>
    <li>1927 x</li>
    <li>1943 x</li>
    <li>1944 x</li>
    <li>1945 x</li>
    <li>1946 x</li>
    <li>1947 x</li>
    <li>1948 x</li>
</ul>

CSS

li { 
    display: block; 
    float: left; 
    margin: 2px; 
    padding: 3px; 
    font-size: 13px;  
    border: solid 1px #ddd; 
}
.myClass { 
    background: #ddd; 
}
li:hover { 
    background: #990000; 
}
ul { 
    width: 300px; 
}

JavaScript

$("li").hover(function() {
  $(this).prevAll("li").toggleClass("myClass");
});