MouseLeave срабатывает, когда мышь находится внутри диапазона

Question

Я делаю этот плагин

HTML

<span class="item" data-item="first"> 
</span> 
    <br><br> 
<span class="item" data-item="second"> 
</span> 
<br><br> 
<span class="item" data-item="third"> 

Jquery

(function($){ 
    $.fn.myPlugin = function(){ 
    $(this).on('mouseleave', function(){ 
      var item = $(this).attr('data-item'); 
      alert(item);   
     });  

    return this.each(function() {  
     for (var i = 1; i <= 2; i++) { 
     $(this).append('<span class="act" title="active '+i+'">act'+i+'</span>'); 
     } 
    }); 
    }; 
})(jQuery); 



$(document).ready(function() { 
    $('.item').myPlugin(); 
}); 

Проблема заключается в том, когда я зависать между двумя динамически создаваемых элементов MouseLeave пожаров, даже если Я внутри класса предметов. Demo http://jsbin.com/IWutoQa/9/

Попробуйте переместить мышь между СИГН.1 & act2

Answer 1

Это происходит из-за margin-left: 10px! Вместо этого используйте padding-left: 10px, и он будет работать правильно.

Пример: jsfiddle