Home/ Questions/Q 3287110
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T20:27:23+00:00

I wrote this jQuery script. It works somewhat OK. I want this fly out

  • 0

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>lorem ip sum loerm ip lorem ip sum lorem ipsum</p>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();});
    • 0