onmouseout, onmouseover not firing for div in a div

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

Hi,

It appears that the onmouseover and onmouseout events do not fire for a div
that's inside another div that has a width set. Can anyone explain this?
Try the html below:

<html>
<body>
<div style="width:400px;border:solid 1px #000000"><div
onmouseover="alert('hover')" onmouseout="alert('unhover')">Neither works over
whitespace.</div></div>
<div style="border:solid 1px #000000"><div style="width:200px
onmouseover="alert('hover')" onmouseout="alert('unhover')">Only onmouseout
works over whitespace.</div></div>
<div style="border:solid 1px #000000"><div onmouseover="alert('hover')"
onmouseout="alert('unhover')">Both work over whitespace.</div></div>
</body>
</html>

Thanks,

David Perry
 
All three work the same using

<div style="width:400px;border:solid 1px #000000">
<div onmouseover="alert('hover1')" onmouseout="alert('unhover1')">One.</div>
</div>
<div style="border:solid 1px #000000">
<div style="width:200px" onmouseover="alert('hover2')" onmouseout="alert('unhover2')">Two.</div>
</div>
<div style="width:400px;border:solid 1px #000000">
<div onmouseover="alert('hover3')" onmouseout="alert('unhover3')">Three.</div>


PS
you were missing a " after width:200px in
div style="width:200px onmouseover="alert('hover')"
--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


| Hi,
|
| It appears that the onmouseover and onmouseout events do not fire for a div
| that's inside another div that has a width set. Can anyone explain this?
| Try the html below:
|
| <html>
| <body>
| <div style="width:400px;border:solid 1px #000000"><div
| onmouseover="alert('hover')" onmouseout="alert('unhover')">Neither works over
| whitespace.</div></div>
| <div style="border:solid 1px #000000"><div style="width:200px
| onmouseover="alert('hover')" onmouseout="alert('unhover')">Only onmouseout
| works over whitespace.</div></div>
| <div style="border:solid 1px #000000"><div onmouseover="alert('hover')"
| onmouseout="alert('unhover')">Both work over whitespace.</div></div>
| </body>
| </html>
|
| Thanks,
|
| David Perry
 
events applied directly to <div> tags are not well supported
cross-platform/browser the last time I looked. Are you sure you want to do
this?
 
Thanks for the response and catching my missing ". That explains the
inconsistent behavior of the second example. I still have my original issue:

When the width is set on outer div, the onmouseover and onmouseout events
only fire when over the text. They do not fire when over the whitespace.
See example 1.

The same html less the width setting in the outer div works fine. See
example 3.

Thanks,

David Perry
 
I believe that this is what is referred to as an event bubbling problem. It
illustrates the danger in applying event handlers to div tags.
 
I am building a menu without using tables. I wanted the sub menu to pop up
if the user moused over any part of the menu item, not just the text. I got
it to work by adding a 1x1 transparent gif next to the link. Now the entire
div responds to the mouse events. Go figure.

Thanks,

David Perry
 
So what is the alternative. I would like a to have a non-table site that
requires dragable divs within other divs. Any suggestions. Firefox also
breaks when 'position' is used, so this is not a IE issue.
 
Back
Top