Html CSS：链接悬停在 Chrome 和 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9691416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Link hover not working in Chrome and Safari
提问by Abhranil Das
I came across this free example website design templatewhich has some links across the top. On hover, the link text and their background are supposed to change colour, according to the CSS. It works in Firefox, Opera and IE but there is no change on hover in Chrome 17.0.963.79 and Safari 5.1.2, so I'm suspecting a webkit issue. But the CSS looks innocuous enough. Where's the problem here? The part of the CSS for this hover is the following:
我遇到了这个免费的示例网站设计模板，它的顶部有一些链接。根据 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);
}
采纳答案by henryaaron
That's interesting...
那很有意思...
This works, would it be acceptable?
这行得通，可以接受吗？
.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);
}
回答by Matthew Darnell
It has to do with setting display:block only on hover. Adding display:block to the anchors from the get go fixes the problem, however it does change the display a little.
它与设置 display:block 仅在悬停时有关。从一开始就向锚点添加 display:block 可以解决问题，但是它确实会稍微改变显示。
.topNaviagationLink a {
display:block;
text-align:center;
}
Remove the negative margin from .topNaviagationLink. It will look a tiny bit different but it works a lot better (the hover targets are where you would expect, etc).
从 .topNaviagationLink 中删除负边距。它看起来会有点不同，但效果更好（悬停目标位于您期望的位置等）。
