Have a problem when mousing over an image inside a div. I use javascript to change the class of a div when either onMouseOver or onClick of the div. If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine. If I use onClick to change the class of the div then the mousing over the image inside div is ---- NOT--- working fine. Why is that? Is there a way to make it work as I want? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="Keywords" content="div, bug, onmouseover, onclick, image, "> <meta name="Title" content="DIV onmouseover bug"> <meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire"> <title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title> <style type="text/css"> body { margin:0; padding:0; } .esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; } .elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; } </style> </head> <body> <div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;"> <div style="display:block; margin:2px;"> MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br> <img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br> </div> </div> <div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;"> <div style="display:block; margin:2px;"> Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br> The only difference between the two divs are: First DIV uses onMouseOver and second uses onClick<br><br> I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br> <img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br> Tested in: FF, IE, OP NE<br><br> I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do. </div> </div> </body> </html> Code (markup):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="Keywords" content="div, bug, onmouseover, onclick, image, "> <meta name="Title" content="DIV onmouseover bug"> <meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire"> <title>How to handle onmouseout of a DIV when onClick event.......</title> <style type="text/css"> body { margin:0; padding:0; } .esmall { display:block; z-index:2; position:absolute; margin:0; padding:0; cursor:pointer; height:20px; width:340px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; } .elarge { display:block; z-index:3; position:absolute; margin:0; padding:0; cursor:pointer; height:auto; width:340px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; } </style> <script type="text/javascript"> /* This is a fix for following problem: 1. I wanted to be able to enlargen (switch class) for a DIV triggered by the onClick event for that DIV 2. The onMouseOut event for same DIV should make DIV to original (small) size (switch back to original class) 3. I wanted an IMG tag inside the DIV that, when clicked, opens another window. The problem was that if I moused in over that image and then out again, the onMouseOut event triggered for the DIV which is not what I wanted. Note that same problem exist for other TAGS than IMG tag, e.g. A, DIV, SPAN, B etc.... and that this workaround can be used when using those tags as well. The not very intutively named functions below take care of the code to handle this in a nice 'crossbrowser'? (need more testing though) manner. Tested in IE, FF, NE and OP (only . Not tested in Safari, and only tested on WinXP) I needed to also use a custom event-handler for the div on onClick because a click on the IMG inside div caused the DIV to be large again. Also take a look at the code at bottom of page. Which is needed to make this work. the code below is a fix I made using code and explanations found on this site: http://www.quirksmode.org/js/events_mouse.html and the doSomething functions on that page, and related pages Then I changed that code to make it work with my code. Big thanks to www.quirksmode.org for nice work and very informative pages It may be other and better ways to handle this quirky problem. BongoBongo 2005-07-01 */ var lastchr; var divid; function doSomething(e){ // requires that outerDIV is named 'div' + number // innerdiv(s) is named 'somethingelse' + number if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; if (tg.nodeName != 'DIV') return; divid = tg.id; lastchr = divid.charAt(divid.length - 1); divid = 'div'+lastchr; var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; while (reltg != tg && reltg.nodeName != '#document'){ reltg= reltg.parentNode } if (reltg == tg) return; document.getElementById(divid).className='esmall'; } function doOtherthing(e){ // requires that outerDIV is named 'div' + number // innerdiv(s) is named 'somethingelse' + number if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; if (tg.nodeName == 'DIV'){ divid = tg.id; lastchr = divid.charAt(divid.length - 1); divid = 'div'+lastchr; document.getElementById(divid).className='elarge'; } else return; } function createCustomEventHandlers(){ document.getElementById('div2').onmouseout = doSomething; if (document.getElementById('div2').captureEvents) document.getElementById('div2').captureEvents(Event.MOUSEOUT); document.getElementById('div2').onclick = doOtherthing; if (document.getElementById('div2').captureEvents) document.getElementById('div2').captureEvents(Event.MOUSECLICK); } </script> </head> <body onload="createCustomEventHandlers();"> <table border=0 cellpadding=5 cellspacing=0 align=right width=300><tr><td style="font-family:arial,sans-serif; font-size:12px; background-color:#cc4;"> This is a demonstration and a fix for a problem I got when using onClick event to change class for a DIV and the onMouseOut event for switching class back to original class.<br><br> My problem was that if I had other elements inside the DIV and moused over those elements then the onMouseOut event for my DIV would fire, which was not my intention. Found some description of the problem and code I had to tweak (at http://www.quirksmode.org/js/events_mouse.html) to fix my problem.<br><br> Used some time to find a workaround and I hope this example can help other in same situation. </td></tr></table> <div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:10px;"> <div style="display:block; margin:2px;"> MouseOver this div.<br><br>Then try to mouse over the image/square or BOLD text below. Here it should work fine<br><br> <img src="event-edit.gif" alt="Edit" title="Edit" onclick="alert('Run som function here')" border="1" height="15px" width="15px" style="background-color:red"> <br><br> <div style="display:block; font-weight:bold;">Try to mouse over this text. It will not trigger onMouseOut event for outer DIV.</div> </div> </div> <div id="div2" class="esmall" style="left:430px; top:230px;"> <div id="innerdiv2" style="display:block; margin:2px;"> WORKING: Click here. Then try to mouseover image/square or BOLD text inside DIV<br><br>When you mouse over the image or square below, it will not trigger the onMouseOut event for outer DIV<br><br> THIS IS WORKING as it should.<br><br> See code for how it's done.<br><br> <img id="img2" src="event-edit.gif" alt="Edit" title="Edit" onclick="document.getElementById('div2').className='esmall'; alert('Run som function here');" border="1" height="15px" width="15px" style="background-color:red;"> <br><br> Tested in: FF, IE, OP NE<br><br> I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do. <br><br> <div style="display:block; font-weight:bold;">Try to mouse over this text. It will not trigger onMouseOut event for outer DIV.</div> </div> </div> <div id="div3" class="esmall" onclick="this.className='elarge';" onmouseout="this.className='esmall';" style="left:50px; top:180px;"> <div id="innerdiv3" style="display:block; margin:2px;"> BUGGY: Click here. Then try to mouseover image/square or BOLD text inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br> The only difference between the two divs are: First DIV uses onMouseOver and second uses onClick<br><br> I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br> <img id="img3" src="event-edit.gif" alt="Edit" title="Edit" onclick="document.getElementById('div2').className='esmall'; alert('Run som function here');" border="1" height="15px" width="15px" style="background-color:red;"> <br><br> Tested in: FF, IE, OP NE<br><br> I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do. <br><br> What seems to be the problem is this<br> When I mouse over the image the onmouseout event for the div is triggered<br><br> Workaround:<br> Try WORKING DIV to the right.<br><br> <div style="display:block; font-weight:bold;">Try to mouse over this text. It --will-- trigger onMouseOut event for outer DIV.</div> </div> </div> </body> </html> Code (markup):
Hello. Hope you have use for it. Laiter I also found a solution for making "popup" divs working also when covering e.g. SELECT lists (which does not look very good in IE where the SELECT is on top of the DIV) Found a site where they use IFRAME behind the popup DIV to solve this problem. I have used this with good results, but it need to work with a browser detection as well since opera handles this a bit quirky... Here is the link: http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx Best regards
I am having the same problem with a dissapearing DIV in IE7 When I go on mouseover a div the only thing I have on it is: #navItem:hover { border: solid 3px #129c78; }
Does adding this line, all by itself, help? :hover { visibility: visible; } ? There is a bug that this code addresses, but I don't know if that's the bug you have.