Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
How to show div on mouseover in jquery in Jquery functions of JQuery Examples
6596 Views
Note 
mouseover() function used to do something when over on some element.
Example: 1  How to show some element,when you hover on one div.

Related Topic:


mouseout() function used to do something when leave from some element.
Example: 2  How to do something,when you 
leave from one div.

Example: 1 How to show some element,when you hover on one div
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").mouseover(function () {
                $(".two").show();
            });
            $(".three").mouseover(function () {
                $(".four").show();
            });
        });
    </script>
    <style type="text/css">
        .two,
        .four {
            display: none;
        }
    </style>
</head>

<body>
    <div class="one">one-hover here to show next number</div>
    <div class="two">two</div>
    <div class="three">three-hover here to show next number</div>
    <div class="four">four</div>
</body>

</html>
Example: 1 Demo 
Example: 2 How to do something,when you leave from one div
<html>

<head>
    <title>HTML-JQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    <script type="text/javascript">
        $(function () {
            $(".one").mouseover(function () {
                $(".two").show();
            });
            $(".three").mouseover(function () {
                $(".four").show();
            });
            $(".one").mouseout(function () {
                $(".two").hide();
            });
            $(".three").mouseout(function () {
                $(".four").hide();
            });
        });
    </script>
    <style type="text/css">
        .two,
        .four {
            display: none;
        }
    </style>
</head>

<body>
    <div class="one">one-hover here to show next number</div>
    <div class="two">two</div>
    <div class="three">three-hover here to show next number</div>
    <div class="four">four</div>
</body>

</html>
Example: 2 Demo 
Next Topics
Next lessons of current book.
Previous Topics
Previous lessons of current book.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details