potato potato - 6 months ago 19
Javascript Question

Jquery have parent do something only once parent and child not hovered

I'm having a parent element flip once its child is hovered, which is working. I can get it to flip back when the child is no longer moused over, but I'm having trouble getting the parent to flip back once the user is no longer hovering over the child OR it's parent. Here's my attempt (fyi I'm very new to this):

$(function (){
var parentOfChild;
$(".bannerBottom").on("mouseenter", function(event){ // this section works
parentOfChild = $(event.target).parent().attr('id');
$(this).parent().css({
'transition': '1s',
'transform': 'rotateY(180deg)'

});
});
$(".bannerBottom").on("mouseleave", function(){ // my problem is in this section
if (mouse not over .bannerBottom || parentOfChild) { //<-- what I'm trying to do but don't know how
$('#' + parentOfChild).css({
'transition': '1s',
'transform': 'rotateY(0deg)'
});
}
});
});


TY for the responses so far, I'm reading the .is() link now, in the mean while here's a JSFiddle.

Answer

If the child is part of the parent's flow root (that is the parent element encloses the child element) then you can just watch for the mouse leave on the parent.

  $(".bannerBottom").parent().on("mouseleave", function(event){
    $('#' + parentOfChild).css({
            'transition': '1s',
            'transform': 'rotateY(0deg)'
        });
 });
Comments