-1

cssアニメーションでdivの高さを設定できるかどうか疑問に思っています。divを持っているので、カーソルを合わせると開きますが、元の高さに戻らないように、その高さを維持したいと思います。これは可能ですか？大学のウェブサイトとして、JavaScriptではなく純粋なCSSで行う必要があります

4

3 に答える 3

1

jQuery を使用する必要があります。CSS3 はすべてのブラウザーでサポートされているわけではありません。ただし、CSS3 を使用してこれを実現することは可能です。

CSS:

#myDiv {
    height:20px;/* initial height */
    width:100px;
    background:#aaa;
    -webkit-transition: height .4s linear; /* you can replace 'height' with the attribute you are changing (eg: color, width...)*/
    -moz-transition: height .4s linear;
    -o-transition: height .4s linear;
    -ms-transition: height .4s linear;
    transition: height .4s linear;
}

#myDiv:hover {
    height:100px; /* desired height */
}

HTML:

<div id="myDiv">
    Hello World!
</div>

お役に立てれば。

編集：申し訳ありませんが、その高さを維持するために必要だとは思いませんでした。そのためには、onmouseout (または別のイベント リスナー) のようなものを使用する必要がありますが、最終的には Javascript を使用します。

于 2012-10-06T20:49:39.413 に答える
1

次のようなことができます:-

HTML:

<div class="divAnimate" onmouseout="this.className='setHeight'">Div Height Animation</div>​

CSS:

.divAnimate {
    border: 1px solid;
}
.divAnimate:hover {
    height: 200px;
}
.setHeight {
    height: 200px;
    border: 1px solid;
}

ライブデモを参照

于 2012-10-06T20:50:02.730 に答える
1

はい、これは CSS3 だけで可能ですが、トランジションの終了状態を維持するために CSS3 アニメーション キーフレームが必要なため、Safari/Chrome と最近のバージョンの Opera、Mozilla Firefox、および IE10 でのみ機能します。

http://jsfiddle.net/rPc88/3/

于 2012-10-06T21:17:51.487 に答える