jQuery: поддержание парения над двумя элементами - PullRequest
Новая
       5

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

4 голосов
/ 17 марта 2009

У меня есть <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-индекса. Предложения?)

Ответы [ 4 ]

8 голосов
/ 17 марта 2009

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

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

2 голосов
/ 17 марта 2009

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

Если это так, вы можете назначить функцию 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); 
    });
});
0 голосов
/ 14 сентября 2012

Этот метод 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 () против 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);
});
0 голосов
/ 17 марта 2009

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

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

...