Microsoft KB Archive Search

Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

  1. Home
  2. PRB: Layered DIV Does Not Capture Mouse Events

PRB: Layered DIV Does Not Capture Mouse Events

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.

↑ Back to the top

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.

↑ Back to the top

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.

↑ Back to the top

More information

Steps to Reproduce Behavior

  1. 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>
  2. 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.
  3. 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.

↑ Back to the top

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

↑ Back to the top

Article Info
Article ID : 262559
Revision : 6
Created on : 1/1/0001
Published on : 1/1/0001
Exists online : False
Views : 162