PRB: Layered DIV Does Not Capture Mouse Events (262559)

SYMPTOMS

In Internet Explorer 5, when you mouse over a DIV element that contains text and has another DIV element layered over it, you do not get mouse events on the lower DIV, and the cursor does not change to a text-selection cursor. In Internet Explorer 5.5, the mouse events fire for the lower DIV, and the cursor does change.

This occurs only when the uppermost DIV is transparent, that is, it has no background specified.

CAUSE

Internet Explorer 5.5 changes this behavior to follow a new model of hit testing for DHTML elements. Many developers did not want Internet Explorer 5 to "absorb" mouse hits for elements that were covered by transparent elements.

RESOLUTION

In certain cases, you may want to have a transparent DIV element receive events. You can do this in two different ways under Internet Explorer 5.5:

Use the CSS alpha filter to set the background color of the DIV to white and set the opacity to 0 (zero) as follows:
```
<DIV STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=0);">
						
```
This results in a fully transparent DIV that includes the content.
Specify a 1-by-1 pixel transparent Graphics Interchange Format (GIF) background as follows:
```
<DIV STYLE="BACKGROUND: url(trans.gif) repeat;">
					
```

In both cases, the transparent DIV receives events as it did in earlier versions of Internet Explorer.

MORE INFORMATION

Steps to Reproduce Behavior

Save the following HTML file as TestDIV.htm:

<HTML>
<HEAD>
<TITLE>Internet Explorer 5.5 Hit Testing for DIVs</TITLE>
</HEAD>

<BODY BGCOLOR="#ffffff">

<DIV STYLE="POSITION:absolute; TOP: 100px; LEFT:10px; BACKGROUND-COLOR: cornflowerblue;
WIDTH: 70px; HEIGHT: 70px" ID="divBottom"
onMouseOver="window.status='Focus inside bottom DIV';"
onMouseOut="window.status='Focus out of bottom DIV';">
Bottom DIV<BR>Bottom DIV<BR>Bottom DIV
</DIV>

<DIV STYLE="POSITION: absolute; TOP: 100px; LEFT: 10px; WIDTH: 90px;
HEIGHT: 40px; BORDER: solid 1px green;"
ID="divTop"></DIV>

</BODY>
</HTML>

Load this file into Internet Explorer 5. Mouse over the horizontal rectangle of the upper DIV that covers the lower DIV. Notice that the cursor never changes to a text selection cursor, even though you position the mouse over text.
Load this file onto another computer with Internet Explorer 5.5. Perform the same test. This time the mouse does change to a text-selection mouse.

REFERENCES

For more information about developing Web-based solutions for Microsoft Internet Explorer, visit the following Microsoft Web sites:

http://msdn.microsoft.com/ie/

http://support.microsoft.com/iep