FIREfox/Safari沒有觸發鼠標懸停事件顯示使用CSS類開關的另一個div的div

我有一個div，當鼠標懸停事件發生時，應該發射一些JavaScript來改變浮動在其上的div的類。該代碼在IE（8）中正常工作，但不是Firefox，Chrome或Safari。我已經把它貼在下面演示示例：FIREfox/Safari沒有觸發鼠標懸停事件顯示使用CSS類開關的另一個div的div

 <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"; 
      }

和CSS文件

.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; 

}

演示包括一個按鈕，這樣你可以看到的JavaScript /定位是沒有問題的，當按鈕被按下它顯示在所有瀏覽器的股利爲.. ..

請幫忙！

來源

2010-09-04 Dave Stringer