jquery如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏

發(fā)布時(shí)間：2022-04-22 15:04:47 來源：億速云閱讀：926 作者：iii 欄目：web開發(fā)

這篇文章主要介紹了jquery如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇jquery如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏文章都會有所收獲，下面我們一起來看看吧。

方法：1、使用hover()方法給父元素綁定鼠標(biāo)事件，并指定兩個(gè)事件處理函數(shù)，語法“父元素.hover(經(jīng)過函數(shù),離開函數(shù))”；2、在經(jīng)過函數(shù)中，用“子元素.show()”顯示子元素；3、在離開函數(shù)中，用“子元素.hide()”隱藏子元素。

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

jquery實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏效果

實(shí)現(xiàn)方法：

使用hover()方法給父元素綁定鼠標(biāo)事件，并指定兩個(gè)事件處理函數(shù)--經(jīng)過顯示函數(shù)和離開隱藏函數(shù)
在經(jīng)過函數(shù)中，使用show()顯示子元素
在離開函數(shù)中，使用hide()隱藏子元素

實(shí)現(xiàn)示例：

<!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元素，默認(rèn)是隱藏的，當(dāng)鼠標(biāo)經(jīng)過時(shí)顯示，離開時(shí)隱藏
			</p>
		</div>
		<br>
		<span>使用鼠標(biāo)懸停div元素</span>
	</body>
</html>

jquery如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏

說明：

hover() 方法規(guī)定當(dāng)鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)。

方法觸發(fā) mouseenter 和 mouseleave 事件。

注意: 如果只指定一個(gè)函數(shù)，則 mouseenter 和 mouseleave 都執(zhí)行它。

語法：

$(selector).hover(inFunction,outFunction)

參數(shù)	描述
inFunction	必需。規(guī)定 mouseenter 事件發(fā)生時(shí)運(yùn)行的函數(shù)。
outFunction	可選。規(guī)定 mouseleave 事件發(fā)生時(shí)運(yùn)行的函數(shù)。

關(guān)于“jquery如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“jquery如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

jquery如何實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示，離開隱藏

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽