jQuery hover() không làm việc với các yếu tố hoàn toàn vị trí và hình ảnh động

Question

Tôi có một số html trông như thế này:

<a href="#" class="move"><span class="text">add</span><span class="icon-arrow"></span></a> 

Và tôi có một sự kiện jquery đăng ký trên thẻ neo:

$('a.move').hover(
    function (event) { 
     $(this).children('span.text').toggle(); 
     $(this).animate({right: '5px'}, 'fast'); 
    }, 
    function (event) { 
     $(this).children('span.text').toggle(); 
     $(this).animate({right: '0px'}, 'fast'); 
    } 
); 

Khi tôi di chuột qua thẻ neo, nó sẽ hiển thị span.text và di chuyển neo 5px sang bên phải.

Bây giờ, do các biến chứng mà tôi không cảm thấy thích tham gia, tôi phải đặt vị trí: tương đối; trên vùng chứa và hoàn toàn định vị biểu tượng và văn bản sao cho biểu tượng xuất hiện ở bên trái và văn bản ở bên phải.

CÁC VẤN ĐỀ:

Khi tôi chuột lên thẻ neo, biểu tượng di chuyển bên phải, và chuột kết thúc lên trên đầu trang của văn bản (xuất hiện). Thật không may, chức năng 'out' được gọi nếu tôi di chuyển chuột từ biểu tượng đến văn bản và hoạt ảnh bắt đầu lặp như điên. Tôi không hiểu những gì gây ra sự kiện "ra" để bắn, vì chuột không bao giờ rời khỏi thẻ neo.

Cảm ơn!

Answer 1

Thay vì di chuột bạn có thể sử dụng "mouseenter" và "MouseLeave" sự kiện, mà không bắn khi yếu tố con nhận được trong cách:

$('a.move').bind('mouseenter', function (e) { 
    $(this).children('span.text').toggle(); 
    $(this).animate({right: '5px'}, 'fast'); 
}) 
.bind('mouseleave', function (e) { 
    $(this).children('span.text').toggle(); 
    $(this).animate({right: '0px'}, 'fast'); 
});