Позволить переходу :hover завершиться, даже если он не зависает на элементе

Я создаю фотосайт здесь, но у меня возникла проблема с переходы :hover на страницах галереи. Он загружает две ссылки, которые лежат над миниатюрами, одна открывает изображение в fancybox, а другая устанавливает изображение в качестве фона.

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

Есть ли способ позволить переходу разыграться, прежде чем вернуться в состояние ожидания?


css css-transitions hover pseudo-element
person eurobob    schedule 03.04.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что JavaScript не исключен, jQuery, безусловно, позволит вам добиться такого поведения с помощью Способность метода .hover() принимать два обратных вызова: один для наведения, другой для остановки наведения.

$("div.thumb").hover(function(){
    // show the magnifying glasses
    $(this).animate({ top: "0", opacity: 1 });
}, function() {
    // hide the magnifying glasses
    $(this).animate({ top: "-100px", opacity: 0 });
});
person cchana    schedule 03.04.2012