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

Javascript examples for jQuery Method and Property:mouseleave

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

Description

mouseout triggers from child elements as well the selected element, mouseleave only triggered for 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;//w  w w. j  a  v a 2s  .  com
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