Jquery Mouseover mouseleave с использованием функции .on

Я пытаюсь реализовать систему тегов с помощью jquery.

У меня есть два div, .tagged и .taggeditem

Когда пользователь наводит курсор на .tagged, я бы хотел, чтобы taggeditem исчезал. Однако taggeditem находится примерно в 50 пикселях от .tagged, поэтому, когда указатель мыши покидает .tagged, .taggeditem исчезает. Я решил установить задержку в 6 секунд, после которой taggeditem будет исчезать. Есть ли способ предотвратить исчезновение taggeditem, если мышь пользователя находится над помеченным элементом.

Here is the script I am using 

       $('.tagged').on({
mouseenter: function () {
    clearTimeout($(this).data('timeoutId'));
    var id_= $(this).attr('post-value');
    var id = $(this).attr('value');
    $('#taggeditem'+id).fadeIn(200);
    $('#taggeditemmask'+id_).fadeIn(200);
},
mouseleave: function () {
   var id_ = $(this).attr('post-value');
   var id = $(this).attr('value');
  if ($('#taggeditem'+id).is(':hover')) {

       }else{
       $('#taggeditem'+id).delay(600).fadeOut(200);
       $('#taggeditemmask'+id_).delay(600).fadeOut(200);
}
}
    });

jquery mouseenter mouseleave
person Kwaasi Djin    schedule 03.11.2013    source источник
comment
Можете ли вы настроить скрипту?   -  person The Alpha    schedule 03.11.2013

Ответы (1)


arrow_upward
0
arrow_downward

Нашел этот пост >Как мне проверить, находится ли мышь над элементом в jQuery?, который использует settimout для mouseenter и mouseleave элемента, который вы хотите постепенно исчезнуть.

Вот пример скрипки, основанный на вашем коде.

Код ниже

$(function()
{
    var timeout;

    $('.tagged').on({
        mouseenter: function () {
            $('#taggeditem').fadeIn(200);
        },
        mouseleave: function () {
          timeout = setTimeout(function(){
              $('#taggeditem').fadeOut(200);
            }, 600);

        }
    });

      $('#taggeditem').on({
            mouseenter: function () {
                clearTimeout(timeout);
            },
            mouseleave: function () {
               timeout = setTimeout(function(){
                  $(this).fadeOut(200);
               }, 600);
            }
       });      
  });
person Matt    schedule 03.11.2013