-2

私は と の を持っ<div>てbackground-imageいheightます100px。100pxホバーすると、divがからに変わるようにしたいと思い300pxます。1s背景画像は、両方のプロパティの所定の位置に移行します。

height背景画像は完全に機能しており、のに変換を適用すると<div>機能しますが、背景画像は機能しなくなります。むしろ、移行なしで、すでに最終的な配置になっています。

自分がやろうとしていることを達成できますか?

4

1 に答える 1

0

これは私が思いついた答えですhttp://jsfiddle.net/m7hHg/

div {
 background-image:url("http://www.whitegadget.com/attachments/pc-wallpapers/130360d1359002342-background-image-background-image-image-1024x768.jpg");/*Insert your image here*/
 width:100px;
 height:100px;
 -webkit-transition:all 1s;
 -moz-transition:all 1s;
 -o-transition:all 1s;
 -ms-transition:all 1s;
 transition:all 1s;
}
div:hover {
 background-position:-350px 0;
 width:300px;
 height:300px;
}

コードの問題は、トランジションで background-position のみを指定していたことです。allの代わりにを使用することで、CSS に「 、などbackground-positionによるスタイルの変更がある場合は、トランジションですべてのスタイルを変更する」ように指示することになります。その 1 つのプロパティのみをアニメーション化する場合にのみ指定しますhoveractive

于 2013-02-05T04:04:13.057 に答える