我正在构建一个涉及 CSS 转换的页面，我注意到我无法让它们中的任何一个工作，所以为了检查实际转换本身的编码是否有误，我粘贴了其中一个W3S 的示例代码片段进入我的页面并对其进行了测试——仍然无效。
我正在使用 Chrome 查看该页面，但这与浏览器无关，因为 W3S 代码(显然)包含所有必要的变体:
W3S HTML:
<div class="test"></div>
W3S CSS:
.test:hover { width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */ }
此外，当我打开伪类 :hover 时，它会在浏览器中完全消失，而如果我将其关闭，显然它不会执行任何操作，因为没有触发它的操作。我不知道这是否相关？
我想知道我是不是忘了在头脑中包含一些东西(我是 a. 对网页设计还是很陌生，b. 相当漫不经心——这不是一个好的组合!)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>...</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
谁能告诉我哪里出错了？
最佳答案
转换的定义不应该在 :hover decleration 上，
它需要为元素定义，然后在 :hover 中改变宽度，
例如:
.test { width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
.test:hover {width: 200px;}
你可以在这里看到这个例子:http://jsfiddle.net/zjaPA/
关于html - CSS3 过渡不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14420061/