Question

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" />

Answer 1

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.