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

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