Question

我正在构建一个涉及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 */ }

另外，当我把伪类：悬停在它上面时，它在浏览器中完全消失，而如果我把它关掉，显然它什么都不做，因为没有动作来触发它。我不知道这是否相关？

我想知道我是否忘记在头脑中加入一些东西（我是一个。对于网页设计来说还是一个新手，b。相当分散 - 不是很好的组合！）

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>...</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

有谁可以告诉我哪里出错了？

Answer 1

过渡的定义不应该在: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/

CSS3过渡无效

1 个答案: