Follow by Email

Tuesday, May 21, 2013

Jquery Mouse Over and MouseOut Example | Jquery MouseOver and MouseOut Demo

Hello in this post i will demonstrate a demo for using Jquery MouseOver and MouseOut.

1. On MouseOver i will be showing Text as Hello World and on MouseOut i will display text as Good Bye World.

2. Below is the code for this.


<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Result").mouseover(function () {
                $("#Result").empty();
                $("#Result").append("Hello World");
            });
            $("#Result").mouseout(function () {
                $("#Result").empty();
                $("#Result").append("Good Bye World");
            });
        });
    </script>
    <title>Mouse over and Mouse Out</title>

</head>
<body>
    <div id="Result">Mouse over and Mouse Out for Message.</div>
</body>
</html>

3. Result:
On MouseOver

On MouseOut