how to unhide an active div on mouse over using jquery
Question
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"/>
<input type="submit" value="Search"/>
</div>
<script>
$("a").hover(function () {
$("div").toggle("slow");
});
</script>
</body>
</html>
4 answers
solution1
1 2012-09-14 07:00:20
try this,
$("a").mouseover(function() {
$("div").show("slow");
});
$("div").mouseleave(function(){
$(this).hide();
});
solution2
0 ACCPTED 2012-09-14 06:43:35
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()
solution3
0 2012-09-14 06:46:03
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
solution4
0 2012-09-14 06:47:04
try this
$("a").mouseover(function() {
$("div").toggle("slow");
});
$("div").mouseleave(function(){
$(this).hide("slow");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.