Vấn đề di chuột qua chuột/mouseout với phần tử con

Question

Tôi gặp sự cố nhỏ này và tôi yêu cầu bạn trợ giúp. Tôi có một div yếu tố, bên trong mà tôi có một img yếu tố , như thế này

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()"> 
    <img id="child" src="button.png" style="visibility: hidden" /> 
</div> 

<script type="text/javascript"> 
    function MyFuncHover() { 
     // Here I have some code that makes the "child" visible 
    } 

    function MyFuncOut() { 
     // Here I have some code that makes the "child" invisible again 
    } 
</script> 

Như bạn, xem, hình ảnh là một đứa trẻ của div. Tôi muốn điều đó chỉ khi tôi rời khỏi div, đứa trẻ biến mất. Tuy nhiên, có vẻ như khi tôi di chuyển chuột qua hình ảnh, chức năng MyFuncOut() được gọi (vì, tôi giả sử, tôi để div bằng cách di chuột qua hình ảnh). Tôi không muốn điều đó xảy ra. Tôi muốn hàm MyFuncOut() chỉ được gọi khi tôi rời khỏi khu vực div.

Tôi không biết rằng khi bạn di chuyển chuột qua điều khiển con, phụ huynh sẽ gọi sự kiện mouseout (ngay cả khi tôi ở trên đứa trẻ, tôi vẫn còn trên cha/mẹ). Tôi bị mắc kẹt vào điều này và tôi cần một chút lời khuyên tốt của bạn. Cảm ơn!

NHỮNG THAY ĐỔI

O.K. Sự kiện bubbling sẽ không gửi sự kiện "mouseout" cho phụ huynh khi tôi "di chuyển" đứa trẻ. Nó cũng sẽ không gửi sự kiện "di chuột qua" cho phụ huynh khi tôi "di chuyển" đứa trẻ. Đó không phải là những gì tôi cần. Tôi cần sự kiện "mouseout" của phụ huynh không được gửi khi tôi "di chuyển" đứa trẻ. Hiểu rồi? Sự kiện bubbling rất hữu ích khi tôi không muốn, ví dụ, một sự kiện nhấp chuột trên đứa trẻ được truyền cho cha mẹ, nhưng đây không phải là trường hợp của tôi. Điều kỳ lạ là tôi có các yếu tố khác bên trong cùng một phụ huynh không kích hoạt sự kiện "mouseout" của cha mẹ khi tôi "di chuột" chúng.

Answer 1

bạn có thể sử dụng "mouseenter" và "MouseLeave" sự kiện có sẵn trong jquery, đây là đoạn code dưới đây,

$(document).ready(function() { 
     $("#parent").mouseenter(function() { 
      $("#child").show(); 
     }); 
     $("#parent").mouseleave(function() { 
      $("#child").hide(); 
     }); 
    }); 

trên là để đính kèm một sự kiện,

<div id="parent"> 
    <img id="child" src="button.png" style="display:none;" /> 
</div> 

Answer 2

Tôi cũng gặp vấn đề với điều này và tôi không thể làm cho nó hoạt động. Đây là những gì tôi đã làm thay vào đó và nó dễ dàng hơn nhiều và không phải là javascript vì vậy nó là nhanh hơn và không thể được tắt.

div.container 
{ 
opacity:0.0; 
filter:alpha(opacity="00"); 
} 

div.container:hover 
{ 
opacity:1.0; 
filter:alpha(opacity="100"); 
} 

Bạn thậm chí có thể thêm chuyển tiếp css3 cho độ mờ để mang lại cảm giác mượt mà hơn cho nó.

Answer 3

Chỉ cần thêm một câu lệnh if để chức năng MyFuncOut của bạn mà kiểm tra mục tiêu không phải là hình ảnh

if (event.target !== imageNode) { 
    imageNode.style.display = 'none' 
} 

Answer 4

Bạn có thể sử dụng giải pháp dưới đây, đó là javascript thuần túy và tôi đã sử dụng thành công.

var container = document.getElementById("container"); 
var mouse = {x: 0, y: 0}; 

function mouseTracking(e) { 
    mouse.x = e.clientX || e.pageX; 
    mouse.y = e.clientY || e.pageY; 
    var containerRectangle = container.getBoundingClientRect(); 

    if (mouse.x > containerRectangle.left && mouse.x < containerRectangle.right && 
      mouse.y > containerRectangle.top && mouse.y < containerRectangle.bottom) { 
     // Mouse is inside container. 
    } else { 
     // Mouse is outside container. 
    } 
} 
document.onmousemove = function() { 
    if (document.addEventListener) { 
     document.addEventListener('mousemove', function (e) { 
      mouseTracking(e); 
     }, false); 
    } else if (document.attachEvent) { 
     // For IE8 and earlier versions. 
     mouseTracking(window.event); 
    } 
} 

Tôi hy vọng điều đó sẽ hữu ích.