Microsoft KB Archive/262559

= PRB: Layered DIV Does Not Capture Mouse Events =

Article ID: 262559

Article Last Modified on 5/11/2006

-

APPLIES TO


 * Microsoft Internet Explorer 5.5

-



This article was previously published under Q262559



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 &quot;absorb&quot; 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:  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:  

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



Steps to Reproduce Behavior
  Save the following HTML file as TestDIV.htm :  <HEAD> <TITLE>Internet Explorer 5.5 Hit Testing for DIVs</TITLE> </HEAD>

<BODY BGCOLOR=&quot;#ffffff&quot;>

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

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

</BODY> </HTML> </li> 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.</li> 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.</li></ol>

<div class="references_section">