Kích hoạt chuột và mouseleave mỗi khi tôi di chuyển chuột bên trong phần tử đã cho

Question

Tôi đang tạo trang web nơi bạn di chuột qua hình ảnh và nó hiển thị phần tử (trong trường hợp này bằng cách mở rộng chiều cao từ 0 đến 154px).

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
}); 

Nội dung mở rộng khi chuột đi vào và sụp đổ khi những chiếc lá chuột, nhưng mỗi khi chuột được chuyển trong các yếu tố nội dung mở rộng và sụp đổ liên tục cho đến khi chuột lá nguyên tố này.

Tôi chưa từng gặp vấn đề này trước đây và tôi đã sử dụng các chức năng này trong quá khứ, vì vậy tôi đang thua lỗ về những gì đang diễn ra. Bất kỳ ý tưởng?

Edit:

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200); 
    }); 
}); 

Tôi bây giờ sử dụng mã ở trên và vẫn nhận được các vấn đề chính xác như vậy. Tôi đã thử tất cả các biến thể của hàm .stop (false, false) (false, true) (true, false) (true, true). Vấn đề xảy ra khác nhau với mỗi một, nhưng nó vẫn xảy ra.

ULTIMATE EDIT:

Vấn đề là nội dung mà con chuột đã đi qua được bao phủ lên bằng nội dung khác nhau khi hàm được gọi. Do đó, tại bất kỳ thời điểm nào, chuột cũng đồng thời nhập và rời hình ảnh. Giải quyết vấn đề bằng cách di chuyển cuộc gọi hàm đến một phần tử khác.

Answer 1

Hãy thử sử dụng các sự kiện .mouseenter thay vì .mouseover

Tôi nghĩ rằng sẽ làm!

Answer 2

thêm dấu nháy() trước dấu .animate() của bạn sẽ giúp sửa lỗi này. bằng cách ngăn chặn các hình ảnh động trước này ngăn chặn các hình ảnh động bắn nhiều lần nếu người dùng di chuyển chuột lên phần tử nhiều lần một cách nhanh chóng

Answer 3

Bạn có thể cần phải sử dụng mouseenter thay vì mouseover và mouseleave thay vì mouseout

Hoặc bạn có thể thử và sử dụng .hover chức năng như dưới đây,

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }, function(){ //mouseleave 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
}); 

Answer 4

Vì bạn đang cố gắng để thực hiện điều này trên một container , trình xử lý sự kiện chính xác của bạn là mouseenter và mouseleave.

Ví dụ:

$("#dropdown-menu-create .dropimage").mouseenter(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
}); 
$("#dropdown-menu-create .dropimage").mouseleave(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"0"},200); 
}); 

Answer 5

Mặc dù điều này có thể không hoàn toàn liên quan, tôi đã có một vấn đề tương tự. Tất cả mọi thứ tôi sẽ di chuyển nhiều nhất của tôi qua div, sự kiện sẽ cháy. Để giải quyết nó, tôi nhận ra rằng khi sự kiện 'hover' được kích hoạt, div đã chuyển đổi trở thành con chuột của tôi đã kết thúc. Để khắc phục nó, tôi chỉ cần thêm một sự kiện vào một sự kiện để làm mờ nó khi rời khỏi chuột.

.profile-about { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 5%; 
     left: 0; 
     z-index: 2; 
     display: none; 
    } 

.profile-image { 
    max-height: 300px; 
    max-width: 300px; 
    -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
} 

    $('.profile-image').hover(function(){ 
     $(this).next().fadeIn(100); 
    }); 

    $('.profile-about').mouseleave(function(){ 
     $(this).fadeOut(100); 
    }); 


    <img src="img/somebody.jpg" class="profile-image"> 
        <div class="profile-about"> 
         <p> 
         Hello I am somebody! 
         </p> 
        </div>