javascript - FIrefox/Safari 不触发鼠标悬停事件以使用 css 类开关在另一个 div 上显示一个 div

标签 javascript html css firefox

我有一个 div,当鼠标悬停事件发生时,应该触发一些 javascript 来将漂浮在其上的 div 的类更改为可见。该代码在 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....

请帮忙!

最佳答案

问题是 .videoImage 的 z-index 低于 .videoInfoPlaceHolder。

关于javascript - FIrefox/Safari 不触发鼠标悬停事件以使用 css 类开关在另一个 div 上显示一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3641785/

相关文章:

html - text-decoration 缺乏继承性的原因是什么?

HTML block 元素在刷新时移动(更改边距)

javascript - 重构循环内的循环以总结属性总数

javascript - 如何调试 javascript :WebForm_DoPostBackWithOptions?

javascript - jQuery 函数语法?

c# - 如何将 CSS 引用链接添加到文件夹中的本地 HTML 文件?

javascript - 使用动态构建的 jQuery promise 链顺序激活特定元素

javascript - $uid 节点如何在 firebase-realtime-database 规则上工作?

javascript - Yeoman composeWith 仅在子生成器中调用构造函数

html - 顶部 : 0px; bottom: 0px; doesn't work as expected