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

到目前为止，

TY的答案，我现在正在阅读.is（）链接，同时这里是JSFiddle。

对于未来的任何人来说，JSFiddle使用了timster的解决方案。

Answer 1

如果孩子是父流的根（即父元素包含子元素）的一部分，那么你可以只注意父母的鼠标离开。

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

（此外，没有必要从鼠标离开事件中搜索DOM（使用$（＆＃34;＃＆＃34; + var）） - 这很慢。事件已经知道它的触发元素。）

Answer 2

在.is()声明https://api.jquery.com/is/

中使用if否定

只有在父母和孩子没有徘徊的情况下，Jquery才有父母做某事

2 个答案: