Javascript Mouseenter和mouseleave同时开火

Mouseenter和Mouseleve同时开火。 我想做的就是在鼠标打开时隐藏元素，并显示是否退出

$（'myid'）。在（'mouseenter'，函数（事件）{
$（this.fadeOut（）；
});
$（'#myid'）。on（'mouseleave'，函数（事件）{
$（this.stop（）.fadeIn（）；
});

{{property}
根据@Terry的评论，
fadeOut
事件将不透明度设置为0，然后将
display
设置为
none
，隐藏元素并触发
mouseleave
事件（因为它不再悬停未显示的内容）

只需设置不透明度的动画，而不是显示（fadeIn，fadeOut）


$（'myid'）。在（'mouseenter'，函数（事件）{
$（this.animate（{'opacity'：0}）；
});
$（'#myid'）。on（'mouseleave'，函数（事件）{
$（this.animate（{'opacity'：1}）；
})；

{{property}
你可以试试这个


$（'myid'）。在（'mouseenter'，函数（事件）{
$（this.hide（）；
});
$（'#myid'）。on（'mouseleave'，函数（事件）{
$（this.fadeIn（）；
})；

{{property}
您也可以仅使用CSS实现此效果


#myid{
不透明度：1；
过渡：0.4s；
}
#myid:悬停{
不透明度：0；
过渡：0.4s；
}
{{property}
您可以尝试以下方法：
添加CSS:

#mydiv { -webkit-transition: all 0.3s;  -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

添加jQuery：

jQuery("#mydiv").mouseenter(function(event) {
        jQuery(this).css({
            opacity: '0'
        });
    });
    jQuery("#mydiv").mouseleave(function(event) {
        jQuery(this).css({
            opacity: '1'
        });
    });

请试试这个


$（'myid'）。在（'mouseenter'，函数（事件）{
$（this.css（'opacity'，0）；
});
$（'#myid'）。on（'mouseleave'，函数（事件）{
$（this.css（'opacity'，1）；
})；
#myid{
-webkit转换：0.5s；
过渡：0.5s；
}

{{property}
这是因为当元素被隐藏时，光标不再在其边界内，因此它将触发
mouseleave
事件。您应该尝试使用不透明性，如
fadeOut（）
实际设置
display:none
。我已将您的代码包装在一个代码段中，并删除了
hidden
属性，用户可以对其进行测试。我如何隐藏此元素以不阻止此span后面的元素？我在hidden div下有一个按钮，它不会触发span上的click event
pointer events:none；
l删除span上的任何点击。但是它会禁用
鼠标移动器
/
鼠标移动
事件吗？啊，是的，让我想一个办法。与所选答案相比，更喜欢这个答案，更干净solution@JessedeBruijne我很高兴你有这样的感觉。也许OP在某些情况下更容易与其他动作结合。