FIrefox / Safari не запускает Mouse Over Event, чтобы показать div поверх другого div с помощью переключателя класса css

Question

У меня есть div, который, когда происходит событие мыши, должен запустить некоторый javascript, чтобы изменить класс div, плавающего над ним, на visible. Код отлично работает в IE (8), но не в Firefox, Chrome или Safari. Я приложил демонстрационный образец ниже:

        <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 / позиционирование не является проблемой, так как при нажатии кнопки он показывает div во всех браузерах ....

Пожалуйста, помогите!

Answer 1

Я переместил указатель мыши над обработчиком событий в родительский div, и теперь firefox, chrome и т. Д. Обрабатывают событие.Я экспериментировал с z-индексами, и все же это не сработало.Похоже, Firefox и т. Д. Не слышат события, когда один div находится над другим, но т. Е. Позволяет вам сойти с рук (хотя мы все это пропустили).

Answer 2

Проблема в том, что z-индекс .videoImage ниже, чем у .videoInfoPlaceHolder.