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

问题描述 投票：0回答：4

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

编辑：错误仅发生在 Google Chrome 中。

html css css-transitions
4个回答
2
投票

在 

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

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

还可以尝试设置 

a {color: white}
看看是否有影响。

2
投票

我知道已经晚了，但这就是我所做的，并且不涉及任何

.js
。

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

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

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

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;
}

最后，您可以使用 jQuery 或 vanilla JS 作为 JavaScript 部分：

jQuery：

$(window).load(function() {
    $("body").removeClass("preload");
});

原版 JS：

window.addEventListener("load", (event) => {
    var element = document.getElementById("body");
    element.classList.remove("preload");
});
0
投票

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

这可能是由 标签引起的，其中定义了样式类，我刚刚移动了

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

从 引用嵌入式

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.