这是我尝试制作一个菜单，当鼠标悬停在菜单项上时背景会逐渐淡化。它适用于 Firefox (10.0.2)，但不适用于 Chrome (17.0.963.79)。我的印象是这可以使用 Chrome 版本 17。我错过了什么？
<html>
<head>
<style type="text/css">
<!--
div.Menu{
border: solid black 4px;
width: 200px;
background-color: #ffffff;
}
div.MenuItem{
border: solid black 3px;
margin: 3px;
height: 20px;
background-color: #ff0000;
transition: background-color 200ms ease-out;
-moz-transition: background-color 200ms ease-out;
-webkit-transition: background-color 200ms ease-out;
-o-transition: background-color 200ms ease-out;
}
div.MenuItem:hover{
background-color: #ffff00;
}
-->
</style>
</head>
<body>
<div class="Menu">
<a href=""><div class="MenuItem"></div></a>
<a href=""><div class="MenuItem"></div></a>
<a href=""><div class="MenuItem"></div></a>
<a href=""><div class="MenuItem"></div></a>
<a href=""><div class="MenuItem"></div></a>
<a href=""><div class="MenuItem"></div></a>
</div>
</body>
</html>
最佳答案
这是 Chrome 16 和 17 的报告问题。如果您设置 <a href="#">然后它工作正常，这是 Chrome 中的 :visited 标签的问题。它在 Chrome 上有标注。
After some experimentation, it seems to have something to do with <a href> being "visited". Non-visited links fade properly, and I think divs work fine too.
例如，如果您在这里查看 fiddle http://jsfiddle.net/joshuamartin/hRAu4/1/你会发现它工作正常。
e:它已在 v18 测试版中得到修复，因此它应该不会再成为问题了!
关于html - 褪色背景在 Chrome 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9703053/