onmouseout, onmouseover not firing for div in a div

D

DLP22192

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
 
S

Stefan B Rusynko

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
 
M

Murray

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?
 
D

DLP22192

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
 
M

Murray

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.
 
D

DLP22192

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
 
M

Murray

Consider your browser compatibility when using events on <div> tags,
though.....
 
N

n3td0g

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Entity name must immediately follow the '&' in the entity referenc 0
Object Not Found Error for Drop Down Menu 1
Trying to restore a Behaviors changed property 2
Border-Right-Length property is not working in a Div 3
why does content repeat? 2
frame problem (work in XP not Me) 1
<a href ...> not working 8
OVERFLOW for Div in table? 1

Top