jQuery не понимает селектор li:hover

$('li').hover(function (e) {   
  highlight.call($(this), true); 
}, function (e) { 
  highlight.call($(this), false); 
}); 
 
function highlight (isIn = true) { 
  let prev = this.prev(); 
  let next = this.next(); 
   
  if (prev.length > 0 && prev.prop('tagName') === 'LI') { 
    prev.css({color: isIn ? 'red' : 'black'}); 
  } 
  if (next.length > 0 && next.prop('tagName') === 'LI') { 
    next.css({color: isIn ? 'green' : 'black'}); 
  } 
}

ul { 
  list-style: none; 
} 
li { 
  cursor: pointer; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li><span>1.</span> First</li> 
  <li><span>2.</span> Second</li> 
  <li><span>3.</span> Third</li> 
  <li><span>4.</span> Fourth</li> 
</ul>