1

FIX -- キーフレームの選択範囲にカーソル: ポインターを置くだけで問題が解決しました。-- -- コードでは、修正はコメントに記載されているため、修正内容と修正内容を区別できます --

キーフレームを使用して循環パスでアニメーション化する html のイメージ オブジェクトがあります。画像には CSScursor:pointerスタイルとonclick:"document.location='a url';return false;"'機能があります。Firefox と IE では、イメージはそのパスに沿ってアニメーション化し、その上にカーソルを置いたときにカーソル スタイルとオンクリック機能を維持します。ただし、Chrome では、ポインターと onclick 機能が失われます。画像をクリックして URL に移動することができずonclick、デフォルトの矢印になるカーソル スタイルも失われます。アニメーション コードを取り出すと、ポインターと onclick 機能は問題なく動作します。ここで何が起こっているのか、これを回避する方法について何か提案はありますか?

html:

<img id="imgId" onclick="document.location='a url';return false;" src="img.gif" width="30" height="30"/>

CSS

#imgId  
{            
       cursor:pointer;    
       position:absolute;  
       left:50%;  
       top:50%;  
       -webkit-animation: myOrbit 12s linear infinite; /* Chrome, Safari 5 */  
       -moz-animation: myOrbit 12s linear infinite; /* Firefox 5-15 */  
        -o-animation: myOrbit 12s linear infinite; /* Opera 12+ */  
       animation: myOrbit 12s linear infinite; /* Chrome, Firefox 16+, 
                                                  IE 10+, Safari 5 */

}

CCS アニメーション - 上の下にあります

@-webkit-keyframes myOrbit {
    from { -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); /*cursor:pointer;*/}
    to   { -webkit-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}

@-moz-keyframes myOrbit {
    from { -moz-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { -moz-transform: rotate(360deg) translateX(150px) rotate(-360deg); /*cursor:pointer*/}
}

@-o-keyframes myOrbit {
    from { -o-transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { -o-transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer*/ }
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(150px) rotate(0deg);/*cursor:pointer;*/ }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg);/*cursor:pointer;*/ }
}
4

1 に答える 1