jQuery Web Page Design Tutorials

jQuery Mouseover and Mouseout Method Tutorial

This jQuery tutorial shows how to use mouseover method and mouseout method. The mouseover() method simply triggers the mouseover event when the mouse pointer is over an element. While the mouseout() method triggers the mouseout event when the mouse pointer leave an element.

jQuery Video Tutorial

Syntax of jQuery Mouseover and mouseout event

The mouseover() method will triggers the mouseover event when the mouse pointer is over an element. Usually, a function will be run or bined when the mouseover event is triggered.

jQuery mouseover event

jQuery Mouseover Event Example

The jQuery codes below will pop up an alert box when mouse is over the cloud element.

// Declare a variable
var selectedElement = $("#cloud");

targetElement.mouseover(function() {
alert("Hi Alex, I am coming!");
});

The result is:

jQuery mouseover method

jQuery Mouseover and Mouseout Used Together

The jQuery mouseover event is usually used together with the mouseout event. In other words, a function will be run when mouse pointer is over the selected element, and another function will be run when mouse pointer leave the selected element.

jQuery Mouseover and Mouseout Event Example
The following codes shows how to use the jQuery mouseover and mouseout event together.

Sometimes the pop up alert message box is quite annoying to visitors. In this example, the message will display in a TextArea field when mouse pointer over and leave the selected element.

// Declare a variable
var selectedElement = $("#cloud");

targetElement.mouseover(function() {
$("#outputText")..text("Hi Alex, I am coming!");
});

targetElement.mouseout(function() {
$("#outputText")..text("I am leaving!");
});

The HTML codes of TextArea field is:

<textarea id="outputText" rows="2" cols="45"></textarea>

When mouse pointer is over the selected element:

jQuery mouseover event

When mouse pointer leave the selected element:

jQuery mouseout event

jQuery Display Text of Selected Paragraph

Let's continue with the above codes and explore more about jQuery.

Tips:
The text displayed in the TextArea field can also be styled as below:

// Declare a variable
var selectedElement = $("#cloud");

targetElement.mouseover(function() {
$("#outputText").css( {"color": "#090", "font-size": "18px" } ).text("Hi Alex, I am coming!");
});

targetElement.mouseout(function() {
$("#outputText").css( {"color": "red", "font-size": "14px" } ).text("I am leaving!");
});

This is the end of jQuery mouseover and mouseout methods tutorial.