1

css で画像をスピンしようとしていますが、何らかの理由hoverで Firefox でしか機能しません。画像はすべてのブラウザで回転しますが、hoverIE と chrome では回転しません

.button img {
        position:absolute;
        left:500px;
        top:300px;
        width:70px;
        height:70px;
        -webkit-animation: rotation 4s infinite linear;
        -moz-animation: rotation 4s infinite linear;
        animation: rotation 4s infinite linear;
    }

    .button img:hover{
        -webkit-animation: rotation 2s infinite linear;
        -moz-animation: rotation 2s infinite linear;
        animation: rotation 2s infinite linear;
    }


    @-moz-keyframes rotation { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes rotation { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes rotation { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
4

1 に答える 1

1

理由の部分はまだわかりませんが（探しています）、.button:hover代わり.button img:hoverにクロムで正常に動作することを確認しました。

ここでフィドルを設定しました（コードの残りの部分は同じです）。これはクロムで動作します。

于 2013-09-21T02:49:00.027 に答える