这里发生了奇怪的事情。如果可以，请参阅此 tinkerbin 页面:http://tinkerbin.com/UZy6H6q4
这是 html 和 css，以防您看不到 tinkerbin。
<head>
<style>
ul{
overflow: hidden;
padding:0;
margin:0;
list-style-type:none;
background-color: pink;
}
ul a{
text-decoration: none;
color: white;
}
li{
float: left;
height: 30px;
line-height: 30px;
width: 90px;
margin-right: 5px;
background-color:red;
text-align:center;
-webkit-transition: all .6s linear;
}
#case2 li{
background: none;
}
#case2 li:hover, li:hover{
background-color: lightblue;
}
</style>
</head>
<body>
<!-- CASE #1 -->
<ul id="case1">
<a href=""><li>Home</li></a>
<a href=""><li>Blog</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
<!-- CASE #2 -->
<ul id="case2">
<a href=""><li>Home</li></a>
<a href=""><li>Blog</li></a>
<a href=""><li>About</li></a>
<a href=""><li>Contact</li></a>
</ul>
</body>
所以，问题:
-转换不适用于案例#1。
- 从 li 元素中删除“背景颜色”(就像我在案例 #2 中所做的那样)使其工作，但以一种奇怪的方式 - 当您从 li 元素上收回光标时，在背景颜色变回之前透明，先变黑。
我测试过将“a”标签嵌套在 li 中的常规做法，而不是相反 - 工作正常，正如我所料，出于某种原因。但是，根据规范，我可以将“li”包裹在“a”标签中，那为什么它不起作用。我错过了什么吗？
哦，我正在使用 Chrome - 可能相关。
最佳答案
将 li 放在 a 中是无效的。如果您尝试验证您的 html，那么它不会被验证，因为它没有遵循正确的标记。 Anchor tags() 是独立的标签，而 li 是列表标签，它们是 ul 或 ol 的直接子元素。希望这可以帮助。 :)
有关详细信息，请参阅 w3schools.com。
关于html - 为什么 CSS3 过渡属性表现得很有趣？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9406980/