目标是让我的 linkIcon 背景在我将鼠标悬停在它上面时更改背景图像。它在 chrome 中工作得很好,但在 firefox 和 safari 中,当我将鼠标悬停在 linkIcon 上时没有任何变化,除非当我的鼠标移动到 div 顶部时我按下鼠标按钮。我不知道有什么区别。 HTML:
<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');
}
最佳答案
您可能会发现您的链接没有高度,因为它的内容是绝对定位的。你能把它改成:
<div id="tab" >
<div id="swingDownButtonContainer">
<a id="linkIcon" href="javascript:slideLinks();">
</a>
</div>
</div>
CSS 编辑:
#swingDownButtonContainer {
text-align:center;
position: relative;
}
或者给链接一个 60px 的高度
关于html - 分区 :hover only working with mouse down in firefox and safari,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21006825/