我有一个 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/