4

在我的网站 ( http://amosjackson.com ) 上，当用户将鼠标悬停在导航链接上时，导航链接使用 css 过渡来改变颜色。尽管在样式表中将颜色设置为白色，但当页面加载时，链接是蓝色的（链接的默认颜色）。然后这会转换回正常的白色，除非页面被刷新，否则不会再次发生。我无法在页面的其他地方重现此问题，并且在联系页面（导航栏中的链接之一）上不会发生此错误。

编辑：错误只发生在谷歌浏览器中。

4

5 回答 5

2

在style.css中，在 class 下.links，移除 CSS 过渡。这应该会停止初始过渡，但也会影响淡出。

.links{
    text-decoration:none;
    color:white;
    font-family:goudy;
    margin:0px;
    font-size:40px;
    padding:10px;
}

也尝试设置a {color: white}，看看是否有影响。

于 2012-08-19T11:52:47.903 回答
2

在您的 HTML 文件中：

<body class="preload">

在 CSS 中：

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

在 JS 中：

$(window).load(function() {
  $("body").removeClass("preload");
});
于 2015-04-28T15:01:43.900 回答
2

我知道已经晚了，但这就是我所做的，没有.js参与。

对于一两个样式，您可以手动将它们包含在页面头部，如下所示：

<head>
    ...
    <style>
        nav a.btn {
            color: white;
        }
    </style>
</head>

允许浏览器立即呈现这些样式，从而防止 FOUC 发生 - 对于大量样式，您应该查看可以提供帮助的预处理器。

于 2016-01-31T10:36:52.947 回答
0

希望您仍在跟踪这个问题，:( 无论如何，回答这个以标记我也面临的问题。

这可能是由定义样式类的 <link> 标记引起的，我只是移动了

a {
  color: white;
  transition: color 0.5s;
}

从 <link> 引用到嵌入的 <style> 标记，该问题已解决。

于 2015-06-23T16:01:14.930 回答
0

我通过包含 CSS 样式<head>而不是<body>. 它在所有 html 加载后加载样式。

于 2016-03-01T15:45:50.083 回答