#jquery #mouseover #mouseout
#jquery #наведение курсора мыши #вывод курсора мыши
Вопрос:
У меня есть куча вложенных divs, ul и т.д. Здесь показана структура.
<script>
$(document).ready(function() {
$('#top-level').mouseover( function() {
$( this ).find('.action').show();
$( this ).find('.drop').show('slide');
});
$('#top-level').mouseout( function(){
$( this ).find('.drop').hide('blind', function(){
$('.action').hide();
});
});
</script>
<div id="top-level">
<div>
<div class="action" style="display:none;">
<ul class="drop" style="display:none;">
<li>Text Here</li>
<li>Text Here</li>
<li>Text Here</li>
</ul>
</div>
</div>
</div>
Показанный здесь ul отображается при переносе. css .drop задается как position:absolute, чтобы он отображался над div верхнего уровня.
Итак, выпадающий ul отображается красиво, но как только он соприкасается с курсором мыши, он сходит с ума (шторки вверх и вниз без остановки и т.д.)! Теперь это будет как-то связано с тем, что курсор мыши каким-то образом теряет фокус.
Как мне следует поступить, чтобы такого рода эффект работал должным образом? Я хочу иметь возможность прокручивать div и выбирать параметры из выпадающего списка после его появления.
Заранее благодарю.
Ответ №1:
Вместо этого используйте наведение курсора мыши:
$(document).ready(function() {
$('#top-level').hover( function() {
$( this ).find('.action').show();
$( this ).find('.drop').show('slide');
}, function(){
$( this ).find('.drop').hide('blind', function(){
$('.action').hide();
});
});
});
Комментарии:
1. Спасибо, теперь это работает намного лучше. Проблема в том, что у меня есть несколько таких div верхнего уровня. Работает нормально, если я теперь аккуратно перемещаюсь по каждому из них, однако на скорости эффект завершается неудачей, и ничего не появляется. Может ли это быть как-то связано с распространением?
2. Если у вас есть несколько div верхнего уровня, я надеюсь, у них разные идентификаторы? Но это не ваш вопрос. Хотя я не совсем уверен, о чем вы спрашиваете. Если вы перемещаете мышь слишком быстро, то, вероятно, вы вызвали hide () до того, как show () получил шанс. Но если вы уточните, я, вероятно, мог бы помочь больше.
3. Да, они это делают — я просто показываю простой фреймворк выше. Кажется, что если я перемещаю указатель мыши с небольшой поспешностью, эффект отлично работает для каждого div, но при перемещении по div с небольшим импульсом у эффекта возникают проблемы с визуализацией до такой степени, что эффект полностью завершается неудачей. Оставьте это на мгновение, и оно снова начнет работать. Как вы сказали, это как-то связано со скрытием / показом. Кстати, спасибо.
4. Я хотел бы сохранить эффект mouseleave (наведение курсора мыши) и запустить следующий эффект div, когда последний div завершает свой эффект out и так далее.
5. Вместо использования метода find я теперь явно получаю уникальный идентификатор, который ссылается на идентификатор div, идентификатор ul и т.д. Это устраняет все мои проблемы с эффектами. Спасибо.
Ответ №2:
Используйте mouseenter и mouseleave.
$('#top-level').mouseenter( function() {
$( this ).find('.action').show();
$( this ).find('.drop').show('slide');
});
$('#top-level').mouseleave( function(){
$( this ).find('.drop').hide('blind', function(){
$('.action').hide();
});
});
Комментарии:
1. Спасибо — это дает мне эффект, аналогичный наведению. Но так же, как при наведении курсора, когда я прокручиваю каждый div верхнего уровня, эффект появляется, а затем исчезает в течение секунды или около того при целенаправленном перемещении мыши. Что-то влияет на это.
Ответ №3:
вы можете использовать $(element).stop(); в начале каждого обработчика событий, чтобы остановить анимацию на этом элементе.
Ответ №4:
Я сделал что-то подобное для кого-то, посмотрите это здесь;