Question

当我将鼠标悬停在其上时，目标是让我的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');
}

Answer 1

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

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

CSS编辑：

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

或者给链接高度为60px

div：hover只能在firefox和safari中使用鼠标

1 个答案: