2

次のコードがあります。

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

次のことを達成するために助けが必要です。

テキストをロールオーバーできるようにしたい: ボックスをスライドして切り替えると、ボックスが開くはずですが、閉じずにボックス内でカーソルを移動できるはずです。カーソルがボックスまたはテキスト Slide toggle the box を離れたときにのみ、ボックスは 400ms 後に閉じます。

助けてくれてありがとう。

4

1 に答える 1

2

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

于 2011-07-24T23:29:11.657 に答える