[英]FIrefox / Safari Not Firing Mouse Over Event to show a div over another div using css class switch
我有一個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 / position並不是問題,因為按下該按鈕時,它會在所有瀏覽器中顯示div。
請幫忙!
問題是.videoImage的z-index低於.videoInfoPlaceHolder的z-index。
我將鼠標移至事件處理程序上的父div上,現在使用Firefox,chrome等處理該事件。 我嘗試了z-indexes,但仍然無法正常工作。 似乎Firefox等在一個div超過另一個div時聽不到該事件,但是讓您擺脫它(認為我們已經通過了所有這些)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.