jQuery - живой указатель мыши и отпуск мышью с исключениями

Question

Здравствуйте, мой код работает нормально, но я не хочу, чтобы он запускался, когда #stem и #case наведены ... потому что они являются частью анимации ... (они абсолютно расположены над div_mainGraphic). У кого-нибудь есть идеи? Спасибо!

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){
    if (event.type == 'mouseenter') {
        $('#stem').animate({"top": "-=35px"}, 500);
    } else {
        $('#stem').animate({"top": "+=35px"}, 150);
    }
});

- это код, который работает, и я думал сделать что-то вроде этого:

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){
    if (event.type == 'mouseenter') {
        $('#stem').animate({"top": "-=35px"}, 500);
    }
    if (event.type == 'mouseleave') {
        $('#stem').animate({"top": "+=35px"}, 150);
    }
    if (event.location == '???') {
        ???
    }
});

вот HTML:

<div id="div_mainGraphic">
</div>
<img src="/images/img_stem.png" id="stem" />
<img src="/images/img_case.png" id="case" />

Answer 1

Попробуйте это вместе с вашим кодом, это в основном остановит распространение события при наведении.

$("#stem,  #case").hover(function(e){
   e.stopPropagation();
});

Используйте этот свой код

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){
    if (event.type == 'mouseenter') {
        $('#stem').animate({"top": "-=35px"}, 500);
    } else {
        $('#stem').animate({"top": "+=35px"}, 150);
    }
});

В качестве альтернативы вы также можете попробовать переместить элементы #stem и #case в #div_mainGraphic, поскольку они являются элементами с абсолютным позиционированием.

Answer 2

Абсолютно простое и удобочитаемое решение в моем коде:

$('.free').live('mouseenter', function() {
  $(this).find('.alert').fadeIn(200);
});

$('.free').live('mouseleave', function() {
  $(this).find('.alert').fadeOut(200);
});