div:hover 仅在 firefox 和 safari 中使用鼠标按下答案

【问题标题】：div:hover only working with mouse down in firefox and safaridiv:hover 仅在 firefox 和 safari 中使用鼠标按下
【发布时间】：2014-01-08 21:23:30
【问题描述】：

目标是当我将鼠标悬停在链接图标背景上时，它会更改背景图像。它在 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');
}

【问题讨论】：

您的代码对我来说在 Firefox 和 safari 中运行良好。你用的是什么版本？
我在我的电脑上使用 26.0，在我的 mac 上用于 firefox，在我的 mac 上使用 6.0.5 用于 safari。在我最近更新之前，我的电脑上有一个过时的 Firefox 版本，但它也无法正常工作。但是，我忘记了我使用的是哪个版本。
您有指向您可以发布的页面的链接吗？或者您可以在 jsfiddle 中重新创建它吗？

标签： html css google-chrome firefox safari

【解决方案1】：

您可能会发现您的链接没有高度，因为它的内容是绝对定位的。你能把它改成：

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

CSS 编辑：

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

或者将链接高度设为 60 像素

【讨论】：