主页 > 网络技术知识

jquery.hover函数详解

营销型网站
2023-11-29 08:07:29

jQuery.hover()函数详解

在jQuery中，hover()函数是一个非常常用的函数。它可以应用在鼠标悬停和离开事件上，用于在网页中添加鼠标悬停时的动画效果、颜色变化等。

基本语法

hover()函数的基本语法如下：

$(selector).hover(function(){
    // 悬停时执行的代码
}, function(){
    // 离开时执行的代码
});

其中，第一个function中包含的是当鼠标悬停在所选元素上时的操作，而第二个function中包含的则是当鼠标离开所选元素时的操作。

实例演示

下面我们通过一个简单的实例来演示hover()函数的使用：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery.hover()函数详解</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            text-align: center;
            line-height: 200px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p id="box">悬停我可以变颜色哦</p>
    <script>
        $(document).ready(function(){
            $("#box").hover(function(){
                $(this).css("background-color","#f00");
            },function(){
                $(this).css("background-color","#ccc");
            });
        });
    </script>
</body>
</html>

在这个例子中，我们选取了一个id为box的p元素，当鼠标悬停在这个元素上时，box的背景色会变成红色，当鼠标离开这个元素时，背景色会变回初始的灰色。