溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jquery如何實現鼠標經過顯示，離開隱藏的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇jquery如何實現鼠標經過顯示，離開隱藏文章都會有所收獲，下面我們一起來看看吧。
方法：1、使用hover()方法給父元素綁定鼠標事件，并指定兩個事件處理函數，語法“父元素.hover(經過函數,離開函數)”；2、在經過函數中，用“子元素.show()”顯示子元素；3、在離開函數中，用“子元素.hide()”隱藏子元素。
本教程操作環境：windows7系統、jquery1.10.2版本、Dell G3電腦。
jquery實現鼠標經過顯示，離開隱藏效果
實現方法：
使用hover()方法給父元素綁定鼠標事件，并指定兩個事件處理函數--經過顯示函數和離開隱藏函數
在經過函數中，使用show()顯示子元素
在離開函數中，使用hide()隱藏子元素
實現示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div{
border: 1px solid red;
height: 100px;
}
p{
background-color: pink;
display: none;
}
</style>
<script>
$(function() {
$("div").hover(function() {
$("p").show();
}, function() {
$("p").hide();
});
})
</script>
</head>
<body>
<div>
<p>
p元素，默認是隱藏的，當鼠標經過時顯示，離開時隱藏
</p>
</div>
<br>
<span>使用鼠標懸停div元素</span>
</body>
</html>
說明：
hover() 方法規定當鼠標指針懸停在被選元素上時要運行的兩個函數。
方法觸發 mouseenter 和 mouseleave 事件。
注意: 如果只指定一個函數，則 mouseenter 和 mouseleave 都執行它。
語法：
$(selector).hover(inFunction,outFunction)
| 參數 | 描述 |
|---|---|
| inFunction | 必需。規定 mouseenter 事件發生時運行的函數。 |
| outFunction | 可選。規定 mouseleave 事件發生時運行的函數。 |
關于“jquery如何實現鼠標經過顯示，離開隱藏”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“jquery如何實現鼠標經過顯示，離開隱藏”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
