X

LATEST #JQUERY NEWS

How to Use jQuery’s .mouseover() Method


jQuery’s .mouseover() method is used to execute some jQuery code whenever an element is “moused-over” (or, as the action is perhaps more commonly referred to, hovered upon). Really, the concept isn’t much different from jQuery’s .hover() method or CSS’s :hover effect, and .mouseover() can be used more or less interchangeably with them.

The syntax for .mouseover() is similar to the syntax of many jQuery event methods. The mouseover is the trigger event, and the code that’s within mouseover’s callback function is the result of the mouseover taking place. As an example, let’s say that when the mouse is moved over an h1 element, you want the color to change to blue. Here’s how that would look:

$("h1").mouseover(function(){
   $(this).css("color", "blue");
})

The biggest difference between using jQuery to achieve this effect rather than CSS’s hover is that with jQuery it’s a lot easier to have a mouseover effect change the styling of an element other than the one that was hovered upon than it is in CSS. For example, let’s say we want all of the text in the p elements to turn blue when we mouseover that same h1 tag. Here’s what that code would look like:

$("h1").mouseover(function(){
   $("p").css("color", "blue");
})

In the example above, all we had to do to make the mouseover effect apply to an element other than the h1 is replace the “this” keyword with the element we wanted to apply the CSS change to (in this case, “p”). In CSS, achieving this same effect would be more complicated.

Recently Published

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...

article image
»

How to Use jQuery to Create Blinking Text

Blinking text is one of those cool features that you never actively ...

article image
»

Convert Images to Black and White using jQuery

Converting an image to black and white is no longer a manual event. ...

article image
»

How to Disable Right-Click Menu Using jQuery

There can be dozens of reasons why you may want to disable right ...

article image
»

How to Optimize jQuery Code for Better Performance

jQuery is the most popular client side library, in fact almost every ...

article image
»

Using Head.js to Load All Your JavaScript

In the past few years, client side frameworks/libraries have become ...

article image
»

How to Detect Browser Using jQuery

One of the more frustrating parts of creating a new web project is ...