0

CSSに少し問題があります。私は CSS3 を学ぶために本を読んでいて、Transition 関数を発見しました。だから私は試してみることにしましたが、どこが間違っているのかわかりません。助けていただければ幸いです。

これは私の Index.html ファイルです

<html>
<head>
    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div class="box"></div>
<div class="ssin"></div>

</body>
</html>

特にない ！これはmain.cssです

.box{
    height: 200px;
    width: 200px;
    background-color: #333333;
}

.ssin{
    height: 200px;
    width: 200px;
    background-color: red;
}

.box:hover .ssin{
    width: 500
}

問題はこのあたりだと思います...

.box:hover .ssin{
    width: 500;
}

.box で何も起こらない場合、理論的には ssin div の幅を変更する必要があります。

助けていただけませんか（これがばかげていることはわかっていますが、まだ学んでいます）

ありがとうございました

4

4 に答える 4

2

プロパティからの測定値widthがありませんが、マークアップでは達成しようとしていることが許可されません。

.box:hover .ssin.ssinがの子である場合にのみトリガーを作成し.boxます。.ssinがホバーされたときの幅をアニメーション化する場合.boxは、CSS で隣接する兄弟セレクターを使用する必要があります ( +):

.box:hover + .ssin {
    width: 500px;
}

要素をアニメーション化する場合は、関連する CSS プロパティも追加する必要があります。

.ssin {
    -webkit-transition: width 0.2s linear;
       -moz-transition: width 0.2s linear;
            transition: width 0.2s linear;
}

これはjsFiddle デモです。

于 2013-02-27T16:06:43.380 に答える
2

そこに投稿した HTML では、は のssin中にありませんbox。内.box:hover .ssinにクラスがあるものを選択します。ここで必要なのは、隣接する兄弟セレクターだと思います。ssinbox.box:hover + .ssin

于 2013-02-27T16:10:07.187 に答える
1

これを試して、

.box:hover .ssin{
    width: 500px;
}

width: 500px;欠けていると思います

于 2013-02-27T16:06:33.443 に答える
1

CSS3 トランジションを調べようとしているので、ボックスのサイズを大きくしようとしていると思います。SO、あなたのマークアップは少し間違っています。はのssin内側にある必要があります.box

<div class="box">
    <div class="ssin"></div>
</div>

トランジション CSS をコードに追加します。

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;
}
于 2013-02-27T16:17:37.273 に答える