您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

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

时间:03-07来源:作者:点击数:

从之前的学习中我们知道,鼠标(指针)移入和鼠标(指针)移出这两个事件往往都是配合起来使用的,而我们需要分别对这两个事件定义。为了简化代码,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>城东书院,给你初恋般的感觉。</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>城东书院成立于 2019 年初,目前已经运营了将近 2 年,我们致力于分享精品教程,帮助对编程感兴趣的读者。<p>
我们一直都在坚持的是:认认真真、一丝不苟、以工匠的精神来打磨每一套教程,让读者感受到作者的用心,以及默默投入的时间,由衷地心动和点赞。这样的教程是一件作品,而不是呆板的文字!<p></div>
</body>
</html>

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

默认效果
图 2:默认效果

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

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

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

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门