Question

尝试使用css旋转图像，但出于某种原因hover仅适用于firefox。所有浏览器中的图像旋转但hover旋转在IE和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); } }

Answer 1

我不知道为什么部分（寻找它），但我发现.button:hover而不是.button img:hover在Chrome上工作正常。

我在这里设置了一个fiddle（其余代码相同），它适用于chrome。

css只悬停在firefox中工作

1 个答案: