div：懸停只能用鼠標在Firefox和Safari瀏覽器中工作

目標是讓我的linkIcon背景將鼠標懸停在其上時更改背景圖像。它在Chrome中運行得非常好，但在Firefox和safari中，當我將鼠標懸停在linkIcon上時，沒有任何更改，除非當鼠標移動到div頂部時我的鼠標按鈕被關閉。我無法弄清楚有什麼不同。 HTML：div：懸停只能用鼠標在Firefox和Safari瀏覽器中工作

<div id="tab" > 
<div id="swingDownButtonContainer"> 
    <a href="javascript:slideLinks();" style="display:block; position:relative;"> 
    <div id="linkIcon"> 
    </div> 
    </a> 
</div> 
</div>

的CSS：

#tab { 
z-index:-1; 
background-color:#f0996f; 
position:absolute; 
left:-10px; 
height:20%; 
width:50px; 
border-radius:10px; 
top:40%; 
} 
#swingDownButtonContainer { 
text-align:center; 
} 
#linkIcon { 
z-index:2; 
background-image:url('media/circles_noHover.png'); 
background-size:40px 57px; 
background-repeat:no-repeat; 
margin-left:auto; 
margin-right:auto; 
width:40px; 
height:60px; 
position:absolute; 
left:10px; 
} 
#linkIcon:hover { 
    background-image:url('media/circles_Hover.png'); 
}

來源

2014-01-08 Iinferno1

對我的高度你的代碼工作正常在Firefox和Safari。你使用什麼版本？ – jmore009

我在我的電腦上使用26.0，在我的Mac上使用Firefox，而在我的Mac上使用6.0.5。我在最近更新之前在我的電腦上安裝了過時的firefox版本，但它也無法正常工作。然而，我忘記了我擁有哪個版本。 – Iinferno1

你有鏈接到你可以發佈的頁面嗎？或者你可以在jsfiddle中重新創建嗎？ – jmore009

你可能發現你的鏈接沒有高度，因爲它的內容是絕對定位。你可以把它改成：

<div id="tab" > 
<div id="swingDownButtonContainer"> 
<a id="linkIcon" href="javascript:slideLinks();"> 
</a> 
</div> 
</div>

CSS編輯：

#swingDownButtonContainer { 
text-align:center; 
position: relative; 
}

或者給的鏈接的60像素

來源

2014-01-08 21:34:50 GuyC

沒有工作，仍然有同樣的問題。 – Iinferno1

這是[小提琴]（http://jsfiddle.net/thebigsurf/94wSj/）按預期工作嗎？ – GuyC

div：懸停只能用鼠標在Firefox和Safari瀏覽器中工作

回答

相關問題