Question

我遇到了this free example website design template，其顶部有一些链接。根据CSS，在悬停时，链接文本及其背景应该会改变颜色。它适用于Firefox，Opera和IE，但在Chrome 17.0.963.79和Safari 5.1.2中悬停没有变化，所以我怀疑是一个webkit问题。但CSS看起来非常无害。这里的问题在哪里？此悬停的CSS部分如下：

.topNaviagationLink a:hover
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png);    
}

Answer 1

它与设置显示有关：仅在悬停时阻止。添加显示：从get go阻止到锚点修复问题，但它确实改变了显示。

.topNaviagationLink a {
    display:block;
    text-align:center;
}

从.topNaviagationLink中删除负边距。它会看起来有点不同，但效果会好很多（悬停目标是你期望的等等）。

Answer 2

那很有意思......

这有效，是否可以接受？

.topNaviagationLink:hover a
{
text-align:center;
border-bottom:none;
color:#0C61C9;
display: block;
width:121px;
height: 35px;
line-height: 35px;
background-image:url(tab.png); 
}

Answer 3

<a>标记是内联元素，因此当您将鼠标悬停在<a>标记上时，背景图片将不会显示。将<a>元素更改为display：block;并且具有与背景图像相同的宽度/高度，它将正常工作。

同样如Matthew Darnell所说，添加text-align：center;并删除负边距。

Answer 4

在我的情况下，有一个看不见的画布覆盖了链接，这阻止了悬停动画的触发。

CSS：链接悬停在Chrome和Safari中无效

4 个答案: