Проверьте, наведена ли мышь на какой-либо объект

ProgramBox

Проверьте, наведена ли мышь на какой-либо объект

Post author:admin
Запись опубликована:28 мая, 2023
Post category:Вопросы по программированию

#jquery #hover #onmouseout

#jquery #наведите #onmouseout

Вопрос:

Здесь у меня есть пример анимации jQuery: http://jsfiddle.net/p7Eta /

Я бы хотел, чтобы все заголовки отображались, если мышь вообще не находится внутри контейнера div. Я пытался сделать что-то вроде:

 $("#container").mouseout(

     function() {
    //slides spans up
    $('.popup').stop().animate({
        bottom: 0   'px'
    });

});

Но это не работает с предыдущими анимациями. Каков правильный способ достижения этого эффекта?

РЕДАКТИРОВАТЬ: я бы хотел что-то подобное этому: http://jsfiddle.net/RE3XK / но при наведении курсора мыши я бы хотел, чтобы заголовки отдельных разделов появлялись, как в первом примере, вместо того, чтобы они все исчезали

Ответ №1:

Вы имеете в виду вот так.

Проверьте рабочий пример http://jsfiddle.net/p7Eta/8 /

Обновить

 $("#slider div.popup").hover(
function() {

    //slides spans up
    $('span', this).animate({
        bottom: 0   'px'
    });
}, function() {

    //slides spans down
    $('span', this).animate({
        bottom: '-'   200   'px'
    });
});

$(document).mouseover(
function(e) {
    e.stopPropagation()
    $('#slider div.popup').find(' span').animate({
        bottom: 0
    });
});

1. Хм, нет, не совсем. Разве это не просто обратная сторона моей анимации? Мне бы хотелось, чтобы все было так, как настроено прямо сейчас, но когда мышь не находится ни на одном из элементов, следовательно, за пределами контейнера div, все заголовки будут всплывать

2. @Hussein спасибо, что посмотрели на это, и это так близко к тому, что я хочу. Есть ли какой-нибудь возможный способ, чтобы все заголовки, кроме того, над которым наведен курсор, скользили вниз? Я пытался анимировать это напрямую, сдвигая вниз все заголовки, которые не активны при наведении курсора мыши на заголовок, но анимация становится прерывистой

3. Действительно? Я делаю именно это (анимирую кучу за раз), и плитки, кажется, скользят довольно приятно для меня. Другие анимации работают у вас правильно?

4. @ima jsfiddle не работал, не смог связаться с вами вовремя. Рад, что вы получили свой ответ.

5. Спасибо. Я 1 отредактировал вас, хотя =)

Ответ №2:

Наконец, jsFiddle сотрудничал…

Я делаю кое-что хакерское, но это единственный способ заставить это работать. Мне пришлось добавить .hover класс к зависшему в данный момент элементу, так как без него мой код не работает должным образом. Просто не смотрите на код, и он будет выглядеть красиво!

Вот рабочий пример: http://jsfiddle.net/p7Eta/41 /

И код:

 // JavaScript Document

//When div.popup is moused over moused over
$("#slider div.block").hover(

function() {

    //slides spans up
    $(this).addClass('hovered');
    $(this).find('span').stop().animate({
        bottom: '0px'
    });
}, function() {
$(this).removeClass('hovered');
    //slides spans down
    $(this).find('span').stop().animate({
        bottom: '-200px'
    });
});

$('#container').hover(function() {
    $('#slider div.block:not(.hovered) span').animate({
        bottom: '-200px'
    });
}, function() {
    $('#slider div.block span').stop().animate({
        bottom: '0px'
    });
});

1. аааа, да, это ИМЕННО то, что я искал. Я никогда не думал о добавлении классов, потому что думал, что код станет беспорядочным, но ваш организован. Большое спасибо =)

2. Нет проблем. Вероятно, вы могли бы еще больше сжать это (сделав инструкции однострочными, но я слишком ленив для этого.

Ответ №3:

Я предполагаю, что вы собираетесь сделать что-то вроде этого, я прав? Единственная проблема с тем, как я это пробовал, заключается в том, что элемент, который вы вводите, также скользит вниз (чего, я думаю, не должно быть).

1. Я только что просмотрел ваш пример, и он сработал довольно хорошо. Почему все поля синие >_>. В любом случае 1 за то, что вы первыми поняли, чего я хотел, и получили почти рабочий пример

2. Извините, пытался выяснить, поможет ли добавление дополнения к #slide решить проблему «панель наведена, но ей все равно удается сдвинуться» -проблема

Ответ №4:

Или что-то вроде этого … что фактически останавливает анимацию перед ее сбросом. http://jsfiddle.net/NDtMW /

1. Чем это отличается от примера, опубликованного OP?

2. когда мышь покидает элемент, движущийся фрагмент не продолжает движение к вершине, а останавливается и повторно анимируется вниз.

Ответ №5:

Пожалуйста, уточните, о чем вы просите. А ты

хотите, чтобы анимации выполнялись непрерывно, чтобы они находились в постоянном движении всякий раз, когда на них не наведен указатель мыши?
хотите, чтобы они находились в состоянии motion-up всякий раз, когда на них не наведен указатель мыши?

Кстати, ваш оригинальный скрипт работает только в IE. Если вас интересует только один браузер, пожалуйста, скажите об этом в будущем. Пользователи IE, вероятно, составляют меньшинство в SO.