CODEWITHSUNDEEP
jqueryhtml
Dan
Dan

Reputation: 2174

how to unhide an active div on mouse over using jquery

i want to unhide a div on mouse over on it?

Presently , in my code(see below) . On hover of a link,a advace search form is opening. And when users is moving their mouse from the url then the open form is closing. I want the form to be close only if the users move their mouse for the form.

Please suggest a solution for it.

          <html>
            <head>
              <style>
            div { background:#dad;
            font-weight:bold;
            font-size:16px;
            width: 400px;
            }
            </style>
              <script src="http://code.jquery.com/jquery-latest.js"></script>
            </head>
            <body>
                <a href="">Do advance Search</a>
              <div style="display: none">
                  <h2>Advance Search Form:</h2>
                  <form action="search.php"><br/>
                 <input type="text" name="isbn" placeholder="Enter Isbn"/><br/>
                <input type="text" name="isbn" placeholder=" Title  "/><br/>
                 <input type="text" name="isbn" placeholder="Enter Author First Name"/><br/>
                 <input type="text" name="isbn" placeholder="Enter author last name"/><br/>
                <input type="text" name="isbn" placeholder="Enter Isbn"/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Search"/>
              </div>
            <script>
            $("a").hover(function () {
            $("div").toggle("slow");
            });
            </script>

            </body>
            </html>

Upvotes: 0

Views: 315

Answers (4)

Sibu
Sibu

Reputation: 4617

Check this working demo,Though i tweaked your code a bit

$("a").hover(function () {
            $("#searchfrm").show();
});

$("#searchfrm").mouseleave(function(){
    $("#searchfrm").hide();
});

Updated to add close button Demo

2nd Update demo

Upvotes: 0

Madurika Welivita
Madurika Welivita

Reputation: 900

try this,

$("a").mouseover(function() {
    $("div").show("slow");
});

$("div").mouseleave(function(){
    $(this).hide();
});
​

http://jsfiddle.net/AHVR9/

Upvotes: 1

Henrik Ammer
Henrik Ammer

Reputation: 1899

For easier reference in the script, change:

<div style="display: none">

To

<div id="theForm" style="display:none">

And update your script to:

$("a").hover(function () {
    $("#theForm").show("slow");
});
$("#theForm").mouseleave(function(){
    $(this).hide("slow");
});​

This will make it toggle away the div when your mouse leaves it's box.

Reference jQuery.mouseleave()

Upvotes: 0

gaurang171
gaurang171

Reputation: 9080

try this

 $("a").mouseover(function() {
     $("div").toggle("slow");
 });
$("div").mouseleave(function(){
  $(this).hide("slow");
});

Upvotes: 0

Related Questions