Introduction to JQUERY – Why the mouseover() method is Important in Selection Process

Guest Posts Paolo Nikko Nuñal

There are sometimes you want your website to be  super dynamic that will entertain users. That is why JQUERY has different types of event handlers and the one that we will tackle in this tutorial is the mouseover() method. From the name itself, the mouseover() method actually listens or triggers when a mouse is hovered on a specific HTML element or selector chosen. This is how the mouseover() method works.

Syntax:

$(selector).mouseover();

or

$(selector).mouseover([FUNCTION]);

FUNCTION - (OPTIONAL) Calls the function to run where the blur event occurs.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("#square").mouseover(function(){
       $("#label").html("SQUARE").fadeOut(2000);
    });
   $("#rectangle").mouseover(function(){
       $("#label2").html("RECTANGLE").fadeOut(2000);
    });
});
</script>
</head>
<body>
<div id="square"><span id="label"></span></div>
<br>
<div id="rectangle"><span id="label2"></span></div>
<style>
.square{
 color: #FF0000;
 border-style: solid;
 width: 100px;
 height: 100px;
}
.rectangle{
 color: #FF0000;
 border-style: solid;
 width: 150px;
 height: 150px;
}
</style>
</body>
</html>


In our example above, we have bind the mouseover() method on the the two div's namely SQUARE and RECTANGLE. So everytime you hover on either of the two objects, the mouseover() method will trigger and displays a label indicating that you have hovered over the specific HTML element. This type of method is commonly used on tables where a user makes a selection but is still hovering on the mouse. Hovering over an element and changing its color is a great way of telling your users that is selecting on that element.