jQuery hover()鼠标移入移出事件

从之前的学习中我们知道，鼠标（指针）移入和鼠标（指针）移出这两个事件往往都是配合起来使用的，而我们需要分别对这两个事件定义。为了简化代码，jQuery 为我们提供了 hover() 方法来一次性定义这两个事件，这就是所谓的“合成事件”。

语法：

$().hover(fn1,fn2)

参数 fn1 表示鼠标（指针）移入事件触发的处理函数，参数 fn2 表示鼠标（指针）移出事件触发的处理函数。

举例

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").hover(function(){
                $(this).css("color","red");
            },function(){
                $(this).css("color","black");
            })
        })
    </script>
</head>
<body>
    <div>C语言中文网，给你初恋般的感觉。</div>
</body>
</html>

预览效果如图 1 所示。

图 1:合成事件

初学的小伙伴对 hover() 这种写法可能会感到很陌生，也总是记不住。hover() 方法，就是插入两个 function(){}。每次使用 hover() 方法时，我们要先把形式写出来，如下所示：

$().hover(function(){},function(){})

形式写好了，再去编写两个 function(){} 中的内容，这样就不会导致书写错误了。

$().hover(function(){
    //鼠标指针移入
},function(){
    //鼠标指针移出
})

hover() 方法，准确来说是替代了 mouseenter() 和 mouseleave() 方法，而不是替代 mouSEOver() 和 mouSEOut() 方法。因此这个例子的 hover() 代码可以等价于：

//鼠标（指针）移入事件
$("div").mouseenter(function(){
    $(this).css("color","red");
})
//鼠标（指针）移出事件
$("div").mouseleave(function(){
    $(this).css("color","black");
})

有些小伙伴可能会问：“对于上面这个例子，我们使用 CSS 的 :hover 伪类不也可以实现吗？而且比 jQuery 更加简单呢。”说得没错，不过 CSS 的 :hover 伪类只限于改变 CSS 样式，对于更复杂的操作就没办法了，请看下面的例子。

举例：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        h3
        {
            height:40px;
            line-height:40px;
            text-align:center;
            background-color:#ddd;
            cursor:pointer;
        }
        div
        {
            display:none;/*设置默认情况下内容不显示*/
            padding:10px;
            border:1px solid silver;
            text-indent:32px;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("h3").hover(function(){
                $("div").css("display","block");
            },function(){
                $("div").css("display","none");
            })
        })
    </script>
</head>
<body>
    <h3>C语言学习网</h3>
    <div>C语言中文网成立于 2012 年初，目前已经运营了将近 5 年，我们致力于分享精品教程，帮助对编程感兴趣的读者。<p>
我们一直都在坚持的是：认认真真、一丝不苟、以工匠的精神来打磨每一套教程，让读者感受到作者的用心，以及默默投入的时间，由衷地心动和点赞。这样的教程是一件作品，而不是呆板的文字！<p></div>
</body>
</html>

默认情况下，预览效果如图 2 所示。

图 2：默认效果

当鼠标指针移到标题上时，预览效果如图 3 所示。

图 3：鼠标指针移到标题时的效果

像上面这种操作，使用 CSS 的 :hover 伪类就无法实现了。

jQuery hover()鼠标移入移出事件

相关文章