0

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

谁能告诉我哪里出错了？

4

1 回答 1

2

过渡的定义不应该在decleration上:hover，它需要为元素定义，然后在: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/

于 2013-01-19T23:35:43.787 回答