jQuery fly out_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-21 12:22 出处：网络

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?

相关专题：jquery

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.