jQuery 事件 mouseover() 方法

jQuery 的 mouseover() 方法是一個事件處理程式，當滑鼠指標移動到選定的元素上時觸發。它可以附加一個函式，在滑鼠懸停事件發生時執行，或者觸發滑鼠懸停事件。

語法

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

$(selector).mouseover(function)

引數

此方法接受一個可選的引數作為函式，如下所述：

function (可選) - 當滑鼠懸停事件發生時執行的可選函式。

返回值

此方法不返回值，而是將事件處理程式繫結到滑鼠懸停事件。

示例 1

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/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.com/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

列印頁面