mouseover 和 mouseout 事件 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8948113/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mouseover and mouseout events jQuery
提问by azamsharp
I am creating a DIV menu when the user mouseover an icon. The div menu also has two child divs which have onclick events. When I mouse over the icon the menu div appears but when I am about to select the child divs the main menu div hides.
当用户将鼠标悬停在图标上时，我正在创建一个 DIV 菜单。div 菜单还有两个具有 onclick 事件的子 div。当我将鼠标悬停在图标上时，菜单 div 出现，但当我要选择子 div 时，主菜单 div 隐藏。
<div id="actionMenu" style="display:none;width:40px;height:30px;background-color:white;z-index:9">
<div id="addRowDiv">Add</div >
<div id="deleteRowDiv">Delete</div>
</div>
$(actionImage).mouseover(function(e) {
// get the coordinates
var x = e.pageX - 40;
var y = e.pageY - 10;
$("#actionMenu").css({
position:"absolute",
top: y + "px",
left: x + "px"
});
$("#actionMenu").attr("rowId", $(td).parent().attr("id"));
$("#actionMenu").show();
});
$("#actionMenu").mouseout(function() {
$(this).hide();
});
$("#actionMenu").find("#addRowDiv").click(function() {
alert('add row clicked');
});
UPDATE 1:
更新1：
I have a table which is populated with data. One of the columns is an icon (actionImage). When I hover over the icon I want to display the div menu (done). The div menu has two child divs (add and delete). Now, when I hover over the child divs the main div (actionMenu) disappears. Why does it disappear since the child divs are inside the action menu div?
我有一个填充了数据的表。其中一列是一个图标 (actionImage)。当我将鼠标悬停在图标上时，我想显示 div 菜单（完成）。div 菜单有两个子 div（添加和删除）。现在，当我将鼠标悬停在子 div 上时，主 div (actionMenu) 消失了。为什么它会消失，因为子 div 位于操作菜单 div 内？
回答by Selvakumar Arumugam
You are hiding the #actionMenu on mouseout.
您在鼠标悬停时隐藏 #actionMenu。
So What is happening is, when you are inside the icon, the div is shown and also hides (I assume the icon is positioned outside #actionMenu). And In the end the #actionMenu div is hidden since you are outside before entering the div.
所以发生的事情是，当您在图标内时，div 会显示并隐藏（我假设图标位于#actionMenu 之外）。最后，#actionMenu div 是隐藏的，因为您在进入 div 之前就在外面。
Edit: Below seems to solve the problem. See DEMOhere
编辑：下面似乎解决了问题。在此处查看演示
$("#actionMenu").mouseenter(function() {
$(this).show();
}).mouseleave(function() {
$(this).hide();
});
回答by ShankarSangoli
It happens because when you mouseover on the menu item to click, mouseoutevent is also fired on the menu div along with mouseoverevent on the menu item so the menu div hides. Use mouseenterand mouseleaveevent combination it will solve this issue.
这是因为，当你将鼠标悬停在菜单项click，mouseout事件也对菜单的div发射沿mouseover事件的菜单项，以便菜单DIV皮。使用mouseenter和mouseleave事件组合它将解决这个问题。
$(actionImage).mouseenter(function(e) {
// get the coordinates
var x = e.pageX - 40;
var y = e.pageY - 10;
$("#actionMenu").css({
position:"absolute",
top: y + "px",
left: x + "px"
});
$("#actionMenu").attr("rowId", $(td).parent().attr("id"));
$("#actionMenu").show();
});
$("#actionMenu").mouseleave(function() {
$(this).hide();
});
$("#actionMenu").find("#addRowDiv").click(function() {
alert('add row clicked');
});
