FIrefox / Safari Not Firing Mouse Over Event to show a div over another div using css class switch

Question

Hello,

I have a div that, when the mouse over event occurs should fire some javascript to change the class of a div floating over it to visible. The code works fine in IE (8) but not firefox, chrome or safari. I've attached a demo sample below:

        <div class="videoImagePlaceHolder">
          <div class="videoInfoPlaceHolder">
            <div id="videoInfoDiv" class="videoInfoNotVisible">
            <asp:LinkButton ID="viewVideoLinkButtonHeader" runat="server" Text='FILM' Font-Size="14pt" CssClass="viewVideoLinkButton" CommandName="Select" Width="100%" Height="25px"></asp:LinkButton>
              TEST VIDEO
            </div>
        </div>
      <div class="videoImage" onMouseOver="makeVisible('videoInfoDiv');makeVisible('div2')">
         TEST OVER
         </div>

   <input id="Button1" type="button" value="button" onclick="makeVisible('videoInfoDiv')" />
       <div id="div2" class="videoInfoNotVisible">
       TEST DIV
       </div>
         <script language="javascript" type="text/javascript">
             function makeVisible(element) {
                 document.getElementById(element).className = "videoInfoVisible";
             };
             function makeHidden(element) {
                 document.getElementById(element).className = "videoInfoNotVisible";
             }

AND THE CSS FILE

.videoInfoVisible
{
 vertical-align:middle;
 width:165px;
 padding-top:3px;
 visibility:visible;
 background-image: url('../images/hover_bg.png');
 background-repeat: no-repeat;
 height:68px;
 cursor:hand;
 z-index:9000;

}

.videoInfoNotVisible
{
 vertical-align:middle;
 width:165px;
 padding-bottom:3px;
 visibility:collapse;
 height:68px;
 cursor:hand;
 z-index:0;
}
.videoImagePlaceHolder
{
 vertical-align:top;
 margin:auto;
 position:relative;
 width:165px;
 height:68px;

}
.videoInfoPlaceHolder
{
 background-position: center center;
 width: 165px;
 height: 68px;
 position: absolute;
 z-index: 10;

}
.videoImage
{
 width:165px;
 height:68px;
 position:absolute;
 z-index:9;

}

The demo includes a button so that you can see that the javascript / positioning is not the problem as when the button is pushed it shows the div in all browsers....

Please help!

Answer 1

Hi,

The problem is that the z-index of .videoImage is lower than the one of .videoInfoPlaceHolder.

Answer 2

I moved the mouse over event handler to the parent div and now firefox, chrome etc. handle the event. I experimented with z-indexes and still it wouldn't work. Seems like firefox etc don't hear the event when one div is over another but ie lets you get away with it (thought we had got passsed all that).