悬停以显示兄弟元素，但电影

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 button时会轻弹，我希望它可以随意点击。

Answer 1

试试这个没有闪烁。我对你的js进行了一些修改

＆＃13;

＆＃13;

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

＆＃13;

.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;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;