Использование jQuery on() Вместо hover()

Question

По стандартам я пытаюсь использовать метод on() jQuery как можно больше для моих обработчиков событий. Вместо hover() я пытался использовать on ('hover'), но он не работает. Что я могу сделать, чтобы этот бит кода работал с on() вместо hover()? Есть ли список событий, которые я вижу, работая с методом on()?

$(document).ready(function(){ 
    $('#navigation li').on('hover', function(){ 
     $(this).animate({ 
      paddingLeft: '+=15px' 
     }, 200); 
    }, function(){ 
     $(this).animate({ 
      paddingLeft: '-=15px' 
     }, 200); 
    }); 
}); 

Answer 1

$('div') 
 
    .on('mouseenter', function(){ $(this).addClass('red'); }) 
 
    .on('mouseleave', function(){ $(this).removeClass('red'); });

div { 
 
    min-height: 50px; 
 
    border: 1px solid #000; 
 
} 
 

 
.red { background-color: #F00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div></div>

Answer 2

Ну парить взять две функции. Он берет один.

$(document).ready(function(){ 
    $('#navigation li').on('mouseenter', function(){ 
     $(this).animate({ 
      paddingLeft: '+=15px' 
     }, 200); 
    }); 
    $('#navigation li').on('mouseleave', function(){ 
     $(this).animate({ 
      paddingLeft: '-=15px' 
     }, 200); 
    }); 
});