onmouseover with DIV's within DIV's

econnections · May 4, 2006

Hello,

(using IE6)

I put one DIV inside another DIV and both had onmouseover functions associated with them (for test purposes the onmouseover should change the DIV background color). What I've discovered is that only the outer DIV function is called and never the inner DIV function.

I found the same when a single table in place inside the cell of a larger table. The larger table onmouseover takes priority over the inner table.

How do I get around this?

Basically, I was trying to create a senario when if you double-click on empty cell you would be given a form that would put new content into the cell rapped in a DIV or SPAN. When you double-clicked on the text in the cell the function in the DIV or SPAN would launch a update form. Unfortunately because of the problem I described above I cannot provide the update capability.

Can anyone see away around this, please?

BillyRayPreachersSon · May 5, 2006

How are the inner elements placed inside the outer ones? If it's using absolute positioning, then I'd expect this to not always work.

Can you show your page code, and/or a URL?

Also, what DOCTYPE are you using?

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

econnections · May 5, 2006

Hi Dan,

Here's the link for the test file using DIV's

http://www.global-office.co.uk/cfdocs/getting_started/my_app/Calander/mouseover_div.htm

BillyRayPreachersSon · May 5, 2006

Aaah - you need to stop the events for the inner container bubbling up to the outer container. Here's how:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>Untitled Document</title>
	<script type="text/javascript">
	<!--

		window.onload = init;

		function init() {
			var div1 = document.getElementById('div1');

			div1.onmouseover = function(evt) {
				evt = (evt) ? evt : event;
				document.getElementById('p9').style.backgroundColor = '#000000';
				evt.cancelBubble = true;
			}

			div1.onmouseout = function(evt) {
				evt = (evt) ? evt : event;
				document.getElementById('p9').style.backgroundColor = '#FFFFFF';
				evt.cancelBubble = true;
			}

			var div2 = document.getElementById('div2');

			div2.onmouseover = function(evt) {
				evt = (evt) ? evt : event;
				document.getElementById('p9').style.backgroundColor = '#FF0000';
				evt.cancelBubble = true;
			}

			div2.onmouseout = function(evt) {
				evt = (evt) ? evt : event;
				document.getElementById('p9').style.backgroundColor = '#FFFFFF';
				evt.cancelBubble = true;
			}
		}

	//-->
	</script>
</head>

<body>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<table width="194" height="43" border="1" cellpadding="0" cellspacing="0">
		<tr>
			<td id='p9'>&nbsp;</td>
		</tr>
	</table>
	<p>&nbsp;</p>

	<div id="div1"style="height:300px; width:300px; background-color:#FFFF66; position:absolute; border:1px solid black;">outer
		<div id="div2" style="background-color:#66CCFF;  height:100px; width:100px; border:1px solid black;">inner</div>
	</div>
</body>
</html>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

econnections · May 5, 2006

I wondered what you were on about when you mentioned bubbles in your reply but when I looked up the 'cancelBubble' you included in the update I began to understand what was happening.

Thanks for your help!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

onmouseover with DIV's within DIV's

econnections

IS-IT--Management

BillyRayPreachersSon

Programmer

econnections

IS-IT--Management

BillyRayPreachersSon

Programmer

econnections

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor