CODEWITHSUNDEEP
jqueryjquery-events
webwrks
webwrks

Reputation: 11918

Live mouseenter and mouseleave with exceptions

My code is working fine but I don't want it to fire when #stem and #case are hovered over, because they are part of the animation. (They are absolutely positioned over div_mainGraphic). Anyone have any ideas?

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

Is the code that is working and I was thinking of doing something like this:

$('#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 == '???') {
        ???
    }
});

Here is the HTML:

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

Upvotes: 0

Views: 4371

Answers (2)

antiqe
antiqe

Reputation: 1124

Absolutely simple and readable solution in my code:

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

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

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this along with your code, this will basically stop the event propagation on hover.

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

Use this code of yours

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

Alternatively you can also try to move #stem and #case elements into #div_mainGraphic since they are absolute positioned elements.

Upvotes: 4

Related Questions