如何在jQuery中的hover事件中运行代码

如何在jQuery中的hover事件中运行代码

在这篇文章中,我们将看到如何使用jQuery来改变元素在悬停事件中的样式。为了改变悬停事件的风格,使用hover()方法。hover()方法是用来指定两个函数,当鼠标指针移动到选定的元素上时,就会启动。

语法:

$(selector).hover(Function_in, Function_out);

参数:它接受两个参数,具体如下-

  • Function_in:它指定了当鼠标移动事件发生时要运行的函数。
  • Function_out:它是可选的,指定了当鼠标移出事件发生时要运行的函数。

在这里,我们已经创建了一个段落元素,当鼠标移动到段落元素上时,元素的样式将发生变化。

示例:

<!DOCTYpe html>
<html>
  
<head>
    <title>
        How to run a code on hover
        event in jQuery?
    </title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
  
    <script>
        (document).ready(function () {
            (document).ready(function () {
                ("p").hover(function () {
                    (this).css({
                        backgroundColor: "green",
                        fontSize: "30px",
                        color: "white"
                    });
                }, function () {
                    $(this).css("background-color", "yellow");
                });
            });
        });
    </script>
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        How to run a code on hover event in jQuery?
    </h3>
  
    <p>Welcome to GeeksforGeeks</p>
  
</body>
  
</html>

输出:

如何在jQuery中的hover事件中运行代码?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法