difference between mouseover, mousemove, mouseenter - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:mousemove

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

Description

difference between mouseover, mousemove, mouseenter

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
div {/*from w ww .j  a  v  a2  s  .c  o  m*/
    width: 150px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}
h3 {
    background-color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var x = 0;
var y = 0;
var z = 0;
$(document).ready(function(){
    $("div.over").mouseover(function(){
        $(".over span").text(x += 1);
    });
    $("div.enter").mouseenter(function(){
        $(".enter span").text(y += 1);
    });
    $("div.move").mousemove(function(){
        $(".move span").text(z += 1);
    });
});
</script>
</head>
<body>

<div class="over">
  <h3>Mouseover event triggered: <span></span></h3>
</div>

<div class="enter">
  <h3>Mouseenter event triggered: <span></span></h3>
</div>

<div class="move">
  <h3>Mousemove event triggered: <span></span></h3>
</div>

</body>
</html>

Related Tutorials