mouseleave only triggered for the selected element, mouseout triggered from any child elements and the selected element - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:mouseout

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. mouseout

Description

mouseleave only triggered for the selected element, mouseout triggered from any child elements and the selected element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
x = 0;//from   w  ww .  j  a va  2s  .  c o m
y = 0;
$(document).ready(function(){
    $("div.over").mouseout(function(){
        $(".over span").text(x += 1);
    });
    $("div.enter").mouseleave(function(){
        $(".enter span").text(y += 1);
    });
});
</script>
</head>
<body>

<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
  <h3 style="background-color:white;">Mouseout event triggered: <span></span></h3>
</div>

<div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
  <h3 style="background-color:white;">Mouseleave event triggered: <span></span></h3>
</div>

</body>
</html>

Related Tutorials