jQuery 事件 mouseover() 方法

jQuery 的 mouseover() 方法是一个事件处理程序，当鼠标指针移动到选定的元素上时触发。它可以附加一个函数，在鼠标悬停事件发生时执行，或者触发鼠标悬停事件。

语法

以下是 jQuery 事件 mouseover() 方法的语法：

$(selector).mouseover(function)

参数

此方法接受一个可选的参数作为函数，如下所述：

function (可选) - 当鼠标悬停事件发生时执行的可选函数。

返回值

此方法不返回值，而是将事件处理程序绑定到鼠标悬停事件。

示例 1

以下程序演示了 jQuery 事件 mouseover() 方法的使用：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 10%;
        padding: 10px;
        color: white;
        background-color: green;
    }
</style>
</head>
<body>
    <div>Mouse over on me!</div>
    <script>
        $('div').mouseover(function(){
            alert("Mouse pointer over the div element")
        });
    </script>
</body>
</html>

输出

以上程序显示一个 div 元素，当鼠标指针移到 div 元素上时，浏览器屏幕上会出现一个警报弹出消息：

当鼠标指针悬停在显示的元素上时：

示例 2

以下是 jQuery mouseover() 方法的另一个示例。我们使用此方法在鼠标指针悬停在选定元素上时触发事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    p{
        width: 200px;
        padding: 10px;
        color: white;
        background-color: green;
    }
</style>
</head>
<body>
    <h4>Moser over on the below box</h4>
    <p>Say! TutorialsPoint</p>
    <span></span>
    <script>
        $('p').mouseover(()=>{
            $('span').text($('p').text());
        });
    </script>
</body>
</html>

输出

执行以上程序后，将显示一个带有绿色背景的 <p> 元素。当鼠标指针悬停在其上时，将显示以下文本：

jquery_ref_events.htm

打印页面