Question

我有以下代码：

        <html>
        <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

        <script>
        $(document).ready(function() {
         // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
          $('#slickbox').hide();
        $('#slick-slidetoggle').hover(function() {
            $('#slickbox').slideToggle(400);
            return false;
          });
        });
        </script>

        <style>
        #slickbox {
        background: #EEE;
        border: 1px solid #900;
        height: 135px;
        }
        </style>
        </head>
        <body>
        <a href="#" id="slick-slidetoggle">Slide toggle the box</a>

        <div id="slickbox" style="display: block; ">This is the box that will be shown and hidden and toggled at your whim. :)</div>
        </body>
        </html>

为方便起见，我还将其放在jsfiddle中：http://jsfiddle.net/WFf9X/

我需要帮助以实现以下目标：

我希望能够翻转文本：幻灯片切换框并且框应该打开，但我也应该能够在框中移动光标，而不关闭它。只有当光标离开框或文本幻灯片切换框时，框才会在400ms后关闭。

感谢您的帮助。

Answer 1

首先让#slick-slidetoggle成为<a>的孩子：

<a href="#" id="slick-slidetoggle">
    Slide toggle the box
    <div id="slickbox" style="display: none; ">This is the box that will be shown and hidden and toggled at your whim. :)</div>
</a>

小提琴：http://jsfiddle.net/ambiguous/WFf9X/1/

这样，当鼠标位于<a>内时，您仍然会悬停在<div>上方。这样做的问题在于它构成了链接的整个<div>部分，但您可以通过使用其他内容而不是<a>来清除它，并将<a>移到“其他内容”中“：

<div id="slick-slidetoggle">
    <a href="javascript:void(0)">Slide toggle the box</a>
    <div id="slickbox" style="display: none;">This is the box that will be shown and hidden and toggled at your whim. :)</div>
</div>

小提琴：http://jsfiddle.net/ambiguous/WFf9X/2/

Jquery悬停触发滑动框，有帮助吗？

1 个答案: