jQuery: поддерживать наведение курсора на два элемента

У меня есть <img>, который при наведении курсора оживляется и исчезает в <div> увеличенной версии изображения вместе с текстом и гиперссылкой. Когда мышь выходит, <div> оживает и исчезает. Это отлично работает, только моя функция наведения относится только к самому <img>. Как только либо а) <div> появляется над <img>, либо б) кто-то перемещает мышь от <img>, чтобы перейти к <div>, jQuery считывает указатель мыши и анимирует <div>. Как мне переписать мой jQuery, чтобы я мог это исправить? Заранее спасибо ...

Вот часть HTML:

<img runat="server" src="~/images/pc_blocks_navigation_spec1.gif" class="navigation_spec1" alt="" />
<div class="navigation_spec1_panel">
    <p>filler <a href="#">test</a></p>
</div>

...и jQuery...

$('.navigation_spec1_panel').hide().css('opacity','0.0');
$('.navigation_spec1').hover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    }, function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});

(Боковой комментарий: мой анимированный <div> не появляется поверх/поверх других <div>, закодированных после этого в IE 6 или 7. Вместо этого появляется <div> за ними, независимо от z-индекса. Предложения?)


jquery hover
person Community    schedule 16.03.2009    source источник
comment
Пожалуйста, заключайте ваш код в теги ‹code›, чтобы он был читабельным; теги удалены, и мы не можем видеть, что вы пытаетесь показать. Также заключите код jQuery в теги ‹code› для лучшей читабельности.   -  person Seb    schedule 17.03.2009

Ответы (4)


arrow_upward
8
arrow_downward

Вариант 1. Поместите img и div в другой div и задайте события для этого внешнего div.

Вариант 2. Используйте setTimer для события mouseout для обоих элементов и clearTimer для события mouseover для обоих элементов, что создает небольшой промежуток времени для перемещения фокуса без запуска кода исчезновения.

person svinto    schedule 16.03.2009

arrow_upward
2
arrow_downward

Вы имеете в виду, что ваш div помещается поверх вашего изображения?

Если это так, вы можете назначить функцию mouseout для div вместо изображения:

$('.navigation_spec1_panel').hide().css('opacity','0.0');

$('.navigation_spec1').mouseover(function() { 
    $('.navigation_spec1_panel').animate({ 
          width: '337px', 
          height: '234px',
          opacity: 1.0 }, 
        1250 ); 
    };
});

$('.navigation_spec1_panel').mouseout(function() { 
    $(this).animate({ 
          width: '1px', 
          height: '1px',
          opacity: 0.0 }, 
        1250); 
    });
});
person Seb    schedule 16.03.2009
comment
Багги, еще ближе. Я должен навести курсор на <img> в течение 5 секунд, прежде чем он появится после первого наведения. Затем, если я наведу указатель мыши на элемент ВНУТРИ тегов <div> (т. е. тегов <p> или <a>), он также прочитает это как отсутствие мыши и закроет <div>. - person ; 17.03.2009

arrow_upward
0
arrow_downward

(ПРИМЕЧАНИЕ. Это приемлемый ответ для меня, но поскольку начальные условия изменились. Я считаю, что вопрос все еще актуален)

Я изменил свой код, чтобы не использовать <div> с <a> внутри, а вместо этого использовать <a> с размером и фоновым изображением. Таким образом, у меня есть только один тег, и предыдущая ошибка становится спорной. Однако я еще не тестировал это в IE...

person Community    schedule 16.03.2009

arrow_upward
0
arrow_downward

Этот метод jQuery немного сложнее, но он хорошо работает, чтобы поддерживать наведение курсора на два элемента. В этом примере предполагается, что вы используете два отдельных элемента DIV с идентификаторами «div1» и «div2». В этом примере также предполагается, что один элемент будет «триггером» (т. е. div1), а другой — «ответом» (т. е. div2). Когда пользователь наводит указатель мыши на триггер, отображается ответ. Когда мышь пользователя покидает и триггер, и ответ, ответ скрывается. Я использовал jQuery slideUp и slideDown в качестве эффекта перехода, но его можно заменить любым переходом jQuery. Я также добавил немного отступов и стилей границ, чтобы визуально продемонстрировать эту концепцию.

HTML:

<style>
    #div1 { padding: 20px; border: 1px solid #000000; }
    #div2 { padding: 20px; border: 1px solid #ff0000; }
</style>

<div id='div1'>Some Content</div>
<div id='div2'>Some Other Content</div>

Код javascript использует вызов setTimeout, чтобы добавить небольшую задержку, позволяющую мыши переходить от одного DIV к другому. Если два DIV расположены друг против друга, этот тайм-аут может быть очень маленьким. Изменение значения «hover_timeout» изменит допустимое время перехода.

ПРИМЕЧАНИЕ. в этом примере важно использовать команды mouseenter и mouseleave. Дополнительные сведения об использовании mouseenter и mouseover см. в этом сообщении о стеке: Jquery mouseenter() vs mouseover()

JAVASCRIPT:

var trigger_element = "#div1";
var response_element = "#div2";
var hover_timeout = 250; // milliseconds

function hideElement(waitTime)
{
    setTimeout(function() 
    {
        if (!$(trigger_element).is(":hover") && !$(response_element).is(":hover"))
        {
            $(response_element).slideUp();
        }
    },waitTime);
}

// trigger mouse enter
$(trigger_element).mouseenter (function() 
{
        $(response_element).slideDown();
});

// trigger mouse leave
$(trigger_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});

// response mouse enter
$(response_element).mouseenter (function() 
{
    // do nothing
});

// response mouse leave
$(response_element).mouseleave (function() 
{
    hideElement(hover_timeout);
});
person Vyke    schedule 13.09.2012