Rumah > hujung hadapan web > tutorial js > jQuery:mouseenter事件的使用和定义

jQuery:mouseenter事件的使用和定义

黄舟
Lepaskan: 2017-06-28 09:41:51
asal
1439 orang telah melayarinya

jQuery 事件 - mouseenter() 方法

定义和用法

当鼠标指针穿过元素时,会发生 mouseenter 事件。

该事件大多数时候会与mouseleave 事件一起使用。

mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("p").mouseenter(function(){//鼠标移入颜色改变

    $("p").css("background-color","yellow");

  });

  $("p").mouseleave(function(){//鼠标移出颜色还原

    $("p").css("background-color","#E9E9E4");

  });

});

</script>

</head>

<body>

<p style="background-color:#E9E9E4">请把鼠标指针移动到这个段落上。</p>

</body>

</html>

Salin selepas log masuk

注释:与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。请看下面例子的演示。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

x=0;

y=0;

$(document).ready(function(){

  $("p.over").mouseover(function(){

    $(".over span").text(x+=1);

  });

  $("p.enter").mouseenter(function(){

    $(".enter span").text(y+=1);

  });

});

</script>

</head>

<body>

<p>不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。</p>

<p>只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。</p>

<p class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">

<h2 style="background-color:white;">被触发的 Mouseover 事件:<span></span></h2>

</p>

<p class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">

<h2 style="background-color:white;">被触发的 Mouseenter 事件:<span></span></h2>

</p>

</body>

</html>

Salin selepas log masuk

Atas ialah kandungan terperinci jQuery:mouseenter事件的使用和定义. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan