Html chrome 和 safari 中的 css 悬停问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1845378/
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 Hover problem in chrome and safari
提问by sathish
This is the site which has a problem
这是有问题的网站
http://www.clubforeducation.com/
http://www.clubforeducation.com/
Top menu will change its color at mouse over. All browsers except chrome and Safari. Is it a Webkit bug. If that how can i solve this?
顶部菜单将在鼠标悬停时改变其颜色。除 chrome 和 Safari 之外的所有浏览器。这是一个Webkit错误。如果那样我该如何解决这个问题？
回答by Jarrett Widman
I find setting display:block on the <a>works. I don't recommend li:hover because it doesn't work in IE6
我在<a>作品中找到了设置 display:block 。我不推荐 li:hover 因为它在 IE6 中不起作用
回答by o.k.w
Seems like a webkit hover behavior thingy.
似乎是一个 webkit 悬停行为。
Check this out:
CSS Hover + Element crashing in webkit (Chrome, Safari)
看看这个：
CSS Hover + Element 在 webkit（Chrome、Safari）中崩溃
Changing/ the selector from
更改/选择器从
.menu_center ul li a:hover
to
到
.menu_center ul li:hover a
Or combining both:
或者两者结合：
.menu_center ul li a:hover,
.menu_center ul li:hover a
{ .... }
works for me.
为我工作。
回答by mikermcneil
I found that adding href="#" works as a temporary fix. Seems like this is a pretty recent development.
我发现添加 href="#" 可以作为临时修复。似乎这是一个相当新的发展。
回答by Palaniichuk Dmytro
Usually the best fix is to add -webkit-transform: translate3d(0,0,0)on the elements that have the transition in Safari. I've got the same problem and fix it Hover bugs with :before On Safari
通常最好的解决方法是在 Safari 中具有过渡的元素上添加 -webkit-transform: translate3d(0,0,0) 。我遇到了同样的问题并修复了悬停错误：在 Safari 上之前
