javascript - 悬停以显示兄弟元素，但轻弹

Question

我使用 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>

我做了一个演示 http://jsfiddle.net/sm3dx99k/重现我的问题。当我将鼠标悬停在 x 按钮 上时，它会轻弹，我希望它能够像我希望的那样可点击。

Answer 1

试试这个，没有闪烁。我对你的 js 做了一些更改

$('body').on("mouseenter",'.parent', function () {
     $(this).children('.dlt').show();
 }).on("mouseleave",'.parent', function () {
    $(this).children('.dlt').hide();
 });

.item {
    border-radius: 50% !important;
    background:orange;
    width:50px;
    height:50px;
}
.dlt {
    border-radius: 50%;
    font-size: 18px;
    background: #ddd;
    border: 1px solid #888;
    font-weight: bold;
    cursor: pointer;
    padding: 0px 5px;
    position:absolute;
    margin:-55px 30px;
    display:none;
}
.parent{
  display:inline-block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="parent">
<div class="item"></div>
<span class="dlt">x</span>
  </div>
<div class="parent">
<div class="item"></div>
<span class="dlt">x</span>
  </div>