Jquery hover вызывает сдвижную коробку, помогите? - PullRequest
Новая
       28

Jquery hover вызывает сдвижную коробку, помогите?

2 голосов
/ 25 июля 2011

У меня есть следующий код: 

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

Мне нужна помощь в получении следующего:

Я хочу, чтобы у меня была возможность переносить текст: сдвиньте переключатель, чтобы окно открылось, но я также должен иметь возможность перемещать курсор в поле, не закрывая его.Только когда курсор покидает поле или текстовый слайд, чтобы переключить поле, окно должно закрываться через 400 мс.

Спасибо за помощь.

1 Ответ

2 голосов
/ 25 июля 2011

Начните с того, что #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>

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

...