jQuery鼠标事件之hover事件，jQuery基础(三)—事件篇教程-慕课网

2-7 jQuery鼠标事件之hover事件

本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery鼠标事件之hover事件

学了mouseover、mouseout、mouseenter、mouseleave事件，也理解了四个事件的相同点与不同点，现在可以用来给元素做一个简单的切换效果

在元素上移进移出切换其换色，一般通过2个事件配合就可以达到，这里用mouseenter与mouseleave，这样可以避免冒泡问题

$(ele).mouseenter(function(){
     $(this).css("background", '#bbffaa');
 })
$(ele).mouseleave(function(){
    $(this).css("background", 'red');
})

这样目的是达到了，代码稍微有点多，对于这样的简单逻辑jQuery直接提供了一个hover方法，可以便捷处理

只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)

handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

这个事件就是这么简单，具体参考下右边代码的操作:

任务

在右边代码42行处，填入任务

调用一个jquery一个方法，可以直接将二个事件函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被执行。

index.html

<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
    }
 
    p {
        height: 50px;
        border: 1px solid red;
        margin: 30px;
    }
 
    .left div {
        background: #bbffaa;
    }
 
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
 
<body>
    <h2>.hover()方法</h2>
    <div class="left">
        <div class="aaron1">
            <p>触发hover事件</p>
        </div>
    </div>
    <script type="text/javascript">
 
    // hover()方法是同时绑定 mouseenter和 mouseleave事件。
    // 我们可以用它来简单地应用在 鼠标在元素上行为
    $("p").?(
        function() {
            $(this).css("background", 'red');
        },
        function() {
            $(this).css("background", '#bbffaa');
        }
    );
 
 
    </script>
</body>
 
</html>

下一节