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 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:
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?
You are hiding the #actionMenu
on mouseout.
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.
Edit: Below seems to solve the problem. See DEMO here
$("#actionMenu").mouseenter(function() {
$(this).show();
}).mouseleave(function() {
$(this).hide();
});
It happens because when you mouseover on the menu item to click
, mouseout
event is also fired on the menu div along with mouseover
event on the menu item so the menu div hides. Use mouseenter
and mouseleave
event combination it will solve this issue.
$(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');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With