Javascript 悬停以显示同级元素，但轻弹

我使用mouseenter和mouseleave在下面使用js切换删除按钮：

 $('body').on("mouseenter",".item", function(){
      $(this).next().show();
    }).on("mouseleave", ".item",function(){
      $(this).next().hide();
    });

这是我的HTML

<div class="item"></div>
<span class="dlt">x</span>

x

---

我做了一个演示来重现我的问题。当我将鼠标悬停在

x按钮上时，它会弹动，我希望它能按我所希望的那样被点击。
试试看，没有闪烁。我对你的js做了一些修改


$（'body'）.on（'mouseenter'，'.parent'，函数（）{
$（this.children（'.dlt'）.show（）；
}).on（“mouseleave”，“.parent”，函数（）{
$（this.children（'.dlt'）.hide（）；
});
.item{
边界半径：50%！重要；
背景：橙色；
宽度：50px；
高度：50px；
}
.dlt{
边界半径：50%；
字号：18px；
背景：ddd；
边框：1px实心#888；
字体大小：粗体；
光标：指针；
填充：0px 5px；
位置：绝对位置；
利润率：-55px 30px；
显示：无；
}
.家长{
显示：内联块；

x
x
这对future元素有效吗？这就是我使用on（）的原因。你也必须使用$（this），如果我有多个圆和x怎么办？@DeanJason future元素？我不能使用on（）绑定到body吗？