1$( "td" ).hover(
2 () => { //hover
3 $(this).addClass("hover");
4 },
5 () => { //out
6 $(this).removeClass("hover");
7 }
8);
9
10//or
11$( "td" )
12 .mouseover( () => {
13 $(this).addClass("hover");
14 })
15 .mouseout( () => {
16 $(this).removeClass("hover");
17 }
18);
19
20//or
21$( "td" )
22 .mouseenter( () => {
23 $(this).addClass("hover");
24 })
25 .mouseleave( () => {
26 $(this).removeClass("hover");
27 }
28);
1$( "div.enterleave" )
2 .mouseenter(function() {
3 n += 1;
4 $( this ).find( "span" ).text( "mouse enter x " + n );
5 })
6 .mouseleave(function() {
7 $( this ).find( "span" ).text( "mouse leave" );
8 });
1$(".selector").on({
2 mouseenter: function () {
3 //stuff to do on mouse enter
4 },
5 mouseleave: function () {
6 //stuff to do on mouse leave
7 }
8});
9
1
2$("#p1").hover(function(){
3
4 alert("You entered p1!");
5
6 },
7
8 function(){
9
10 alert("Bye! You now leave p1!");
11
12});
13
1<!doctype html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <title>mouseover demo</title>
6 <style>
7 div.out {
8 width: 40%;
9 height: 120px;
10 margin: 0 15px;
11 background-color: #d6edfc;
12 float: left;
13 }
14 div.in {
15 width: 60%;
16 height: 60%;
17 background-color: #fc0;
18 margin: 10px auto;
19 }
20 p {
21 line-height: 1em;
22 margin: 0;
23 padding: 0;
24 }
25 </style>
26 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
27</head>
28<body>
29
30<div class="out overout">
31 <span>move your mouse</span>
32 <div class="in">
33 </div>
34</div>
35
36<div class="out enterleave">
37 <span>move your mouse</span>
38 <div class="in">
39 </div>
40</div>
41
42<script>
43var i = 0;
44$( "div.overout" )
45 .mouseover(function() {
46 i += 1;
47 $( this ).find( "span" ).text( "mouse over x " + i );
48 })
49 .mouseout(function() {
50 $( this ).find( "span" ).text( "mouse out " );
51 });
52
53var n = 0;
54$( "div.enterleave" )
55 .mouseenter(function() {
56 n += 1;
57 $( this ).find( "span" ).text( "mouse enter x " + n );
58 })
59 .mouseleave(function() {
60 $( this ).find( "span" ).text( "mouse leave" );
61 });
62</script>
63
64</body>
65</html>
66