javascript - ホバーアニメーションを削除

Question

以下のリンクにアクセスして、ストーリーをクリックしてください。

http://premio-e.de/

マウスオーバーすると、

http://awesomescreenshot.com/03b435w09

ホバーするとアニメーションします。

これを削除するにはどうすればよいですか。これには以下のcssを使用しています。

.storypageThumb1 {
    float:left;
    width:175px;
    height:91px;
    text-indent: -9999px;
    background:url(../images/storyPage-thumb01_new.png) no-repeat;
    text-transform: uppercase;
}

.storypageThumb1:hover {
    background-position:0 -91px;
}

位置を変えるだけだと思います。アニメーション化していません。

Answer 1

次のコードを使用して、すべての CSS 変更でアニメーション化するようにすべてのアンカーを設定しました。

a { -webkit-transition: all 0.3s ease; }

でこれをオーバーライドできますstoreypageThumb1:

.storypageThumb1 {
    -webkit-transition: none;
    ...
}

Answer 2

firebug で、すべてのaタグにトランジションが関連付けられていることに気付きました。

-moz-transition: all 0.3s ease 0s;

だからこそアニメ化している。次のように、その要素からトランジションを削除する必要があります。

.storypageThumb1 { 
    transition:none; 
    -moz-transition:none; 
    -o-transition:none; 
    -webkit-transition:none; 
}

Answer 3

このサイトでは、彼らはと呼ばれるCSSファイルですnormalize.css

a {
    -moz-transition: all 0.3s ease 0s; // convet this line to -moz-transition: none;
    color: white;
    outline: medium none;
    text-decoration: underline;
}

またはあなたの.storypageThumb1書き込みのために：

.storypageThumb1 {
  -moz-transition: none;
  -webkit-transition: none;
}

Answer 4

これよりずっと簡単です！

.storypageThumb1:hover { 背景: なし; }