Примеры для jQuery .mouseout()

> > > > Примеры

Show the number of times mouseout and mouseleave events are triggered. mouseout fires when the pointer moves out of the child element as well, while mouseleave fires only when the pointer moves out of the bound element.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mouseout demo</title>
  <style>
  div.out {
    width: 40%;
    height: 120px;
    margin: 0 15px;
    background-color: #d6edfc;
    float: left;
  }
  div.in {
    width: 60%;
    height: 60%;
    background-color: #fc0;
    margin: 10px auto;
  }
  p {
    line-height: 1em;
    margin: 0;
    padding: 0;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div class="out overout">
  <p>move your mouse</p>
  <div class="in overout"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<div class="out enterleave">
  <p>move your mouse</p>
  <div class="in enterleave"><p>move your mouse</p><p>0</p></div>
  <p>0</p>
</div>
 
<script>
var i = 0;
$( "div.overout" )
  .mouseout(function() {
    $( "p:first", this ).text( "mouse out" );
    $( "p:last", this ).text( ++i );
  })
  .mouseover(function() {
    $( "p:first", this ).text( "mouse over" );
  });
 
var n = 0;
$( "div.enterleave" )
  .on( "mouseenter", function() {
    $( "p:first", this ).text( "mouse enter" );
  })
  .on( "mouseleave", function() {
    $( "p:first", this ).text( "mouse leave" );
    $( "p:last", this ).text( ++n );
  });
</script>
 
</body>
</html>

Демонстрация: