Home » JavaScript » jQuery » jQuery mouseover example

About Dmitry Mishchenko

This year I graduate from Applied Mathematics department of Brest State University. I'm fond of genetic algorithms and my degree work will be about generating timetables. Also I'm keen on programming and web-development, especially Java and Javascript. Now I work as a Java Developer at Java department of VRP Consulting.

jQuery mouseover example

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

forArticleGood

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");
Download
You can download the full source code of this example here: JQueryMouseover

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments