Với jquery, có thể dùng hover. Tuy nhiên khi bạn không sử dụng jquery mà dùng javascript. Event thay thế là mouseout khi muốn check con trỏ chuột ra ngoài vùng của 1 phần tử X.
Tuy nhiên hàm mouseout vẫn bắt khi con trỏ chuột di chuyển trong vùng phần tử con của phần tử X bạn cần check.
Vì vậy bạn cần hàm lọc điều đó như dưới đây:
DIV.onmouseout=function(e){
// check and loop relatedTarget.parentNode
// ignore event triggered mouse overing any child element or leaving itself
var obj=e.relatedTarget;
while(obj!=null){
if(obj==this){
return;
}
obj=obj.parentNode;
}
// now perform the actual action you want to do only when mouse is leaving the DIV
}
Hàm trên sẽ gọi dần đến phần tử cha của phần tử di chuyển tới. Nếu phần tử cha này vẫn là phân tử X thì sẽ không gọi các sự kiện.
Link tham khảo: https://stackoverflow.com/questions/4697758/prevent-onmouseout-when-hovering-child-element-of-the-parent-absolute-div-withou
