jQuery fly out
I wrote this jQuery script. It works somewhat OK. I want this fly out to close when the user mouse goes outside the fly out. How would I do that?
Here is the code below:
<script language="javascript">
$(document).ready(function() {
$('#slick-box').hide();
$('a#slick-toggle').mouseover(function() {
$('#slick-box').toggle(400);
}).mouseout(function(){
$('#slick-toggle').hide();});
});
</script>
<style>
</style>
</head>
<body>
<a id="slick-toggle" href="#"> toggle the box </a>
<div style="position:relative;outline:1px dashed green;padding:10px;">
<div id="slick-box" style="position:absolute;outline: 1px dashed hotpink; color:#fff; background-color:#000; opacity:0.8; filter:80;top:0px; left:0px ;">
<h2>music name </h2>
<p> This will be shown and hidden</p>
</div>
</div>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
<p>开发者_Go百科lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
</body>
In the mouseout function, did you mean to use #slick-box instead of #slick-toggle? Here's a live demo of that change http://jsfiddle.net/rchern/szSbF/
I think this is what you are looking for.
http://jsfiddle.net/dactivo/z2sWn/
It shows when you do mouseover the link, and it only disappears when you click in the document (it's what you've said in one comment).
$('#slick-box').hide();
$('#slick-toggle').mouseover(function() {
$('#slick-box').show(400);
})
$(document).click(function() {$('#slick-box').hide();});
Is http://jsfiddle.net/pahnin/unGmT/ what you want?
When you mouse out the sleek box the sleek toggle will get hidden, and when you click outside the box gets hidden.
For that I have added another div called container which contains everything.
加载中,请稍侯......
精彩评论