JQuery show/hide panel on hover [duplicate]
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
JQuery slideToggle timeout
I have simple html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("div").hide();
$("button").hover(function() {
$("div").slideDown("slow");
});
setTimeout(hidepanel, 4000);
function hidepanel() {
if ($('div').is(':hover') === false) {
$('div').slideUp();
}
}
$('div').mouseleave(function() { setTimeout(hidepanel, 4000); });
$('button').mouseleave(function() { setTimeout(hidepanel, 4000); });
});
</script>
<style>
div { width:400px; }
</style>
</head>
<body>
<button>Toggle</button>
<div style="border: 1px solid">
This is the paragraph to end all paragraphs. Yo开发者_JS百科u
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</div>
</body>
</html>
I need:
- Show the panel (div) while mouse cursor is over the button or over the panel (div)
- Hide panel when mouse is not over button or panel for 4 seconds
- Hide panel immediately when I click on the page on any place outside the panel or button.
What should I change im my code?
Thanks a lot!
http://jsfiddle.net/TQp9C/1/
The interesting part is hiding the panel when clicking outside of the panel/button.
$(document).click(function (e) {
if (e.target.id !== "btn" && e.target.id !== 'panel' && $(e.target).parents('#panel').length === 0)
{
hidepanel();
}
});
http://jsfiddle.net/AWM44/4/
Obviously, you'll want to be more specific with the selectors than "DIV" and "button" but you get the idea.
加载中,请稍侯......
精彩评论