代码之家 › 专栏 › 技术社区 › user244394

jquery弹出

jquery

user244394 · 技术社区 · 14 年前

我写了这个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>

3 回复 | 直到 14 年前

netadictos 14 年前

我想这就是你要找的。

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

当你鼠标移到链接上时,它就会显示出来,只有当你点击文档时,它才会消失(这就是你在一条评论中所说的)。

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