Javascript is essentially a very good tool for tracking events on a web page and changing some view options after user actions. We can track mouse clicks, mouse movements, key’s ups and downs and a lot of other user activity.
All this stuff can be done using jQuery and in this article we’ll consider its approach how to perform actions on mouseover event.
Along with mouseover there are such events as mousemove and mouseenter, which are slightly different and also can be tracked using jQuery.
Meanwhile it realy allows us to “write less and do more”.
First let’s introduce our HTML page (Note, that according to code.jquery.com this version of jQuery won’t work in IE < 9)
<!DOCTYPE html> <html> <head> <title>JQuery mouseover example</title> </head> <body> <link rel="stylesheet" type="text/css" href="css.css"> <script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-2.1.3.min.js"></script> <div id="container" class="square"></div> <script src="js.js"></script> </body> </html>
Then a small stylesheet to display div
.square {
width: 300px;
height: 300px;
position: absolute;
}
#container {
background: green;
}
And finally our JS code, where we select div element by id and define a handler for mouseover event. For now we’ll just change element’s background color
$("#container").mouseover(function() {
this.style.background = "red";
});
Still, this code changes square’s color every single time mouse enters it, though it’s a little bit different from mouseenter event, and we’ll see why. Let’s add another div inside
<!DOCTYPE html> <html> <head> <title>JQuery mouseover example</title> </head> <body> <link rel="stylesheet" type="text/css" href="css.css"> <script src="https://www.webcodegeeks.com/wp-content/litespeed/localres/aHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vjquery-2.1.3.min.js"></script> <div id="container" class="square"> <div id="insider" class="square"></div> </div> <script src="js.js"></script> </body> </html>
And of course add some appropriate CSS
#insider {
background: yellow;
top: 200px;
left: 200px;
}
Then we’ll modify an action for mouseover of #container and add the same code for #insider
$("#container").mouseover(function() {
this.style.background = "#" + Math.random().toString(16).slice(2, 8);
});
$("#insider").mouseover(function() {
this.style.background = "#" + Math.random().toString(16).slice(2, 8);
});
By using this "#" + Math.random().toString(16).slice(2, 8) we get random double number between 0 and 1 then get its string hexadecimal representation and finally cut 6 symbols for a color starting from the third one (because the first two equal to “0.”)
So now after dragging mouse cursor over the squares you can notice that the container-square changes its color every time cursor enters #contaner or #insider divs. Even if you don’t touch white space around the squares.
What you see in your browser should look like this
But if you change both mouseover to mouseenter you’ll see that #container square changes its color only after you visit white space of the page and move your mouse back to the squares.
You should also remember that following code snippets are equal using jQuery
$("#container").mouseover(function() {
this.style.background = "#" + Math.random().toString(16).slice(2, 8);
});
$("#container").on("mouseover", function() {
this.style.background = "#" + Math.random().toString(16).slice(2, 8);
});
And you always can remove an event handler by using
$("#container").off("mouseover");
You can download the full source code of this example here: JQueryMouseover
