javascript - Jquery 让父级仅在父级和子级未悬停时执行某些操作

Question

一旦子元素悬停，父元素就会翻转，这是有效的。当鼠标不再悬停在子级上时，我可以让它翻转回来，但是一旦用户不再将鼠标悬停在子级或其父级上，我就很难让父级翻转回来。这是我的尝试(仅供引用，我对此很陌生):

$(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)'
            });
        }
    });
}); 

对于到目前为止的回复，我现在正在阅读 .is() 链接，同时这里有一个 JSFiddle .

对于 future 的任何人来说，这是工作 JSFiddle使用timster的解决方案。

Answer 1

如果子元素是父元素流根的一部分(即父元素包含子元素)，那么您只需观察鼠标离开父元素即可。

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

(此外，无需从鼠标离开事件中搜索 DOM(使用 $("#"+ var) ) - 这很慢。该事件已经知道其触发元素。)