使用jQuery on()而不是hover()

Question

根据标准，我正在尝试将jQuery的on（）方法尽可能多地用于我的事件处理程序。我尝试使用on（'over'）而不是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

好的悬停有两个函数。On takes one。

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

Answer 3

好吧，我参加聚会迟到了，但我认为这应该可以完成

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

})；