Jquery 让 parent 只做一次 parent 而 child 没有悬停

Question

一旦 child 悬停，我就会翻转 parent 元素，这是有效的。当 child 不再被鼠标悬停时，我可以让它向后翻转，但是一旦用户不再将鼠标悬停在 child 上，我就很难让 parent 向后翻转或者是 parent。这是我的尝试（仅供参考，我对此很陌生）：

$(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 到目前为止的回复，我正在阅读 .is() link，同时这里有一个 JSFiddle.

对于未来的任何人来说，这里是 JSFiddle 与 timster 解决方案的工作。

Answer 1

在 if 语句 https://api.jquery.com/is/

中使用带否定的 .is()

Answer 2

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

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

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

Jquery 让 parent 只做一次 parent 而 child 没有悬停

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

javascript

jquery

parent

hover