Question

请转到以下链接并点击故事，

当我鼠标移过时，

它在悬停时动画。

我该如何删除它。我在这下面使用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

在此网站中，他们是一个名为normalize.css

的CSS文件

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

OR 为你的.storypageThumb1写：

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

Answer 4

比这简单得多！

.storypageThumb1：hover { 背景：无; }

删除悬停动画

4 个答案: