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

在萤火虫中，我注意到您的所有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 { 背景：无；}