Question

我写了这个jQuery脚本。它工作得有点好。当用户鼠标飞出外面时，我希望这个飞出来关闭。我该怎么做？

以下是代码：

    <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>

Answer 1

在mouseout功能中，您的意思是使用#slick-box而不是#slick-toggle吗？以下是该更改的实时演示http://jsfiddle.net/rchern/szSbF/

Answer 2

http://jsfiddle.net/pahnin/unGmT/你想要的是什么吗？

当您将鼠标移出光滑的盒子时，光滑的切换将被隐藏，当您在外面单击时，该框将被隐藏。

为此，我添加了另一个名为container的div，其中包含所有内容。

Answer 3

我认为这就是你要找的东西。

http://jsfiddle.net/dactivo/z2sWn /

它会显示鼠标悬停链接的时间，只有当您单击文档时它才会消失（这是您在一条评论中所说的内容）。

$('#slick-box').hide();
$('#slick-toggle').mouseover(function() {
  $('#slick-box').show(400);
})
    $(document).click(function() {$('#slick-box').hide();});

jQuery飞出去了

3 个答案: