Сохраняйте состояние наведения, пока пользователь не наведет курсор мыши на другой элемент - PullRequest
Новая
       13

Сохраняйте состояние наведения, пока пользователь не наведет курсор мыши на другой элемент

0 голосов
/ 21 декабря 2010

Во-первых, позвольте мне заявить, что я - нуб-нуб, так что это не имеет большого смысла.

Итак, у меня есть ряд элементов списка, которые раскрываются, чтобы показать скрытый элемент внутри, если пользователь наводит курсор на ссылку внутри элемента (а не на весь элемент списка)

Проблема в том, что если пользовательская мышь покидает ссылку, li снова закрывается.

Мне нужно, чтобы это работало таким образом, чтобы ли закрывалась, только если навести курсор на ссылку в другом ли. (извините, это трудно выразить словами)

Вот мой код. 

$(document).ready(function(){
                $(".home_upcoming_title").hoverIntent({
                over: makeTall, 
                timeout: 500, 
                out: makeShort

        });
    }); // close document.ready

    function makeTall(){$(this).parents("li").animate({"height":200},200);}
    function makeShort(){$(this).parents("li").animate({"height":32},200);}

и HTML 

    <li class="p1">

            <ul class="home_upcoming_list2" id="fade">
            <li class="home_upcoming_date">Sat.Sept.23rd.2010</li>
            <li><a href="./." class="home_upcoming_title" >Event Title</a></li>
            <li class="home_upcoming_city">Los Angeles</li>
            <li class="home_upcoming_type">Festival</li>
            <li class="home_upcoming_venue">Venue</li>
            <li class="home_upcoming_age">18+</li>
            <li><a href="./." title="Buy Tickets" class="home_upcoming_tix">Buy Tickets</a></li>
            <li><a href="./." class="upcoming_info" title="View Details"></a></li>
            </ul>

        <div style="height:150px; background-color:#FF0000; display:block;" class="sl0w"></div>
        </li>

поэтому ссылка с классом "home_upcoming_title" раскрывает li, чтобы показать div внутри, но когда я наведу курсор мыши на сам div, список закрывается. Мне также это нужно, поэтому только класс "home_upcoming_title" расширяет div. но он должен оставаться открытым, пока вы не наведите курсор мыши на другую ссылку с тем же классом.

извините, если в этом нет особого смысла:)

Ответы [ 3 ]

1 голос
/ 21 декабря 2010

Я вижу, что вы используете плагин hoverIntent, и AFAIK плагин не имеет того, что вы намерены делать, возможно, вам придется изменить базовый код плагина, чтобы выполнить то, что вы хотите. Или попробуйте использовать собственные события mouseover mouseout, чтобы делать то, что вы хотите, но это потребует больше кодирования с вашей стороны.

1 голос
/ 21 декабря 2010

Имейте функцию closeTips, которая вызывает makeShort для всех всплывающих подсказок, затем используйте .mouseover() вместо .hoverIntent() для запуска closeTips и затем вызывайте makeTall.

0 голосов
/ 21 декабря 2010

Я бы порекомендовал попробовать jQuery UI Accordion . Есть возможность вызвать его при наведении мыши на событие. См. Раздел «Открыть при наведении мыши» в правой части ссылки.

Это отвечает на ваш вопрос?

...