By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,563 Members | 918 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,563 IT Pros & Developers. It's quick & easy.

mouse events

P: 4

I want to create a pop up when I hover over a div layer. This works perfectly fine until I add another layer inside it.

Here is an example of the code:
<div style="height: 300px; border: 1px solid;" onmouseover="alert('over')" onmouseout="alert('out')">
<div style="position: absolute; left: 200px; height: 200px; width: 100px; border: 1px solid green"></div>

Basically the problem is when my mouse hovers over the small div layer inside the big layer an alert will come out indicating it is out of the big div layer, and then another popup indicates that it is back in.

What I want is for that alert to pop up only when I'm out of the big div layer.

I've tried using zindexes but it doesn't do anything...

Thanks in advance
Feb 15 '07 #1
Share this Question
Share on Google+
3 Replies

Expert 100+
P: 839
For IExplorer, use "onmouseenter" and "onmouseleave" events, or write a event handler function and set window.event.cancelBubble = true.

For other browsers call event.stopPropagation() method inside the event handler function.
Feb 16 '07 #2

Expert Mod 15k+
P: 16,027
See this page for more info.
Feb 16 '07 #3

P: 1
Well, thats easy, you need to add the function to both divs...
think if it like an image.

you have a square image
|Box |
Now you ad another one inside it
| --- |
| --- |

Then you put your mouse over the inner box. Now technically it is over both images, but visually its not.
Thats how it works
What you could do though, if your too lazy, put an invisible div over it, however, the downside is that the user would not be able to touch anything under it.

<div style="position: absolute; left: (X Coord)px; top: (Y Coord)px; width: (width of area to cover)px; height: (height of area to cover)px;" (functional data)>(nothing goes here.)</div>

Then you input the coords that it is over your object.

Well, good luck, i hoped it helped, and sorry about the horrific grammar. i wasn't planning to write a book on it. :P
Oct 25 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.