Question

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

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

Answer 1

在style.css中，在类.links下，删除CSS转换。这应该会停止初始转换，但也会影响淡出。

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

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

Answer 2

我知道它已经很晚了，但这就是我所做的，并且没有.js参与其中。

对于一两种风格，您可以手动将它们包含在页面的顶部，如下所示：

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

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

Answer 3

在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");
});

Answer 4

希望你还在跟踪这个问题，:(无论如何，请回答这个问题，以便记下我面临的问题。

这可能是由＆lt; link＆gt;引起的。标签，其中定义了样式类，我刚刚移动

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

来自＆lt; link＆gt;的

对嵌入式＆lt; style＆gt;的引用标签，这个问题已经解决了。

Answer 5

我通过在<head>而不是<body>的底部包含CSS样式来解决这个问题。它是在所有html加载后加载样式的。

链接上的css3过渡在加载时显示蓝色

5 个答案: