jQuery hover Example

In this tutorial, you will learn how to use hover effect using mouseover event in jQuery.

When you use jQuery hover method?

jQuery hover method can be used when you want some action to happen when user take mouse pointer on any html element like image, div etc, and when user take out the mouse pointer, then the element become back to normal.

So, we learn two events, mourseover or mouseenter and mouseout.

jquery hover effect on image and div

Like CSS, in jQuery also we have in-built hover method, which create the same effect as explained above

    $(htmlElementId).hover(function_in, function_out);

Now, let’s look at some jquery hover effect real-time example!

If you take your mouse on following line, you will see that the text and background color will change, and when you take mouse out, the color will be back to normal.

Here is the code

First you need to add the jquery library reference

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" />

Now write the following code to create the effect.

<script>
$(document).ready(function () {
    $("#dvWelcome").hover(function () {
        $(this).css("background-color", "#02b60b");
        $(this).css("color", "#fff");
    }, function () {
        $(this).css("background-color", "#fff");
        $(this).css("color", "#02b60b");
    });
});
</script>

Make sure you change the html element id.