hover to show siblings element but flicks

Question

I use mouseenter and mouseleave to toggle a delete button using js below :

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

Here is my HTML

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

I did a demo http://jsfiddle.net/sm3dx99k/ to reproduce my problem. When I hover into the x button it will flick, I expect it to as I want it to be clickable.

Answer 1

Try this there is no flickering. I made a few changes to your 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>