一旦子元素悬停,父元素就会翻转,这是有效的。当鼠标不再悬停在子级上时,我可以让它翻转回来,但是一旦用户不再将鼠标悬停在子级或其父级上,我就很难让父级翻转回来。这是我的尝试(仅供引用,我对此很陌生):
$(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的解决方案。
最佳答案
如果子元素是父元素流根的一部分(即父元素包含子元素),那么您只需观察鼠标离开父元素即可。
$(".bannerBottom").parent().on("mouseleave", function(event){
$(this).css({
'transition': '1s',
'transform': 'rotateY(0deg)'
});
});
(此外,无需从鼠标离开事件中搜索 DOM(使用 $("#"+ var) ) - 这很慢。该事件已经知道其触发元素。)
关于javascript - Jquery 让父级仅在父级和子级未悬停时执行某些操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37335592/