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

Question

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

好吧 hover 有两个功能。上一个。

$(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);
});

});

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

Using jQuery on() Instead of hover()

javascript

jquery

event-handling

hover