0

CSSトランジションを含むページを作成していますが、CSSトランジションを機能させることができなかったので、実際のトランジション自体のコーディングに間違いがないことを確認するために、W3Sの例の1つを貼り付けました。私のページにスニペットを入れてテストしましたが、それでも機能しませんでした。

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をオンにすると、ブラウザに完全に表示されなくなりますが、オフにすると、トリガーするアクションがないため、明らかに何も実行されません。これが適切かどうかわかりませんか？

おそらく頭の中に何かを含めるのを忘れたのではないかと思いました（私はまだウェブデザインにかなり慣れていて、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

遷移の定義は、: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 に答える