jQuery: Mouse events

This entry is part 9 of 33 in the series jQuery Tutorial

Ever hover your mouse over a line and found that the line color changed?

This can be done easily using jQuery.

<!doctype html>
<html>
<head>
    <title>hover demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <style>
        ul {
            color: blue;
        }
    </style>
    <script>
        $(function () {
            $('li').mouseover(
                    function () {
                        $(this).css('color', 'red');
                    }
            );
            $('li').mouseout(
                    function () {
                        $(this).css('color', 'blue');
                    }
            )
        });
    </script>
</head>
<body>

<ul>
    <li>Milk</li>
    <li>Bread</li>
</ul>
</body>
</html>

Try The Code

With jQuery, it acts on the li element using $(‘li’).

It is also similar to writing jQuery(‘li’) where the $ is replaced by jQuery.

Here are other jQuery related mouse events.

Mouse EventDescription
.click()triggers an event when the mouse is clicked.
.dblclick()triggers an event when the mouse is double clicked.
.hover()event to be executed when the mouse pointer enters and leaves the elements.
.mousedown()Binds an event handler to the “mousedown”
.mouseenter()triggers an event when the mouse enters an element.
.mouseleave()event is fired when the mouse leaves an element.
.mousemove()Bind an event handler to the “mousemove” Javascript event.
.mouseout()Bind an event handler to the “mouseout” event.
.mouseover()When the mouse is over an element.
.mouseup()Fired on a mouseup event.
.toggle()Events to be executed on alternate clicks.

Series Navigation<< jQuery: Focus event
jQuery: Mouse hover event and callback >>