CSS 反向悬停动画答案

【问题标题】：CSS inverse Hover animationCSS 反向悬停动画
【发布时间】：2020-04-04 02:05:24
【问题描述】：

我用 CSS 编写了一个 HTML 页面，当用户将鼠标放在它上面时，它会将文本的颜色更改为红色，如果鼠标移出，则返回到白色。

问题是由于transition: 2s color linear;，当页面加载时文本会“淡入”动画（我需要将颜色从白色更改为红色，但一开始它会从透明更改（我想）变白）

有没有办法让文本在没有淡入的情况下立即显示？

这是代码和jsfiddle，但您需要将代码复制并粘贴到您的计算机上并使用浏览器打开它才能看到“淡入”（在 jsfiddle 上它会出现没有不需要的效果）

这是 HTML

html,
body {
  background-color: black;
  color: white;
  overflow: hidden;
}

p {
  text-align: center;
  cursor: default;
}

.watermark {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  resize: none;
}

#watermark {
  color: white;
  font-size: 260%;
  transition: 2s color linear;
  -webkit-transition: color 2s linear;
}

#watermark:hover {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s linear;
  color: rgb(255, 17, 69);
}

<!DOCTYPE html>
<html lang="it">

<head>
  <link rel="stylesheet" type="text/css" href="home.css">
</head>

<body>
  <div class="watermark">
    <p id="watermark">hover effect</p>
  </div>
</body>

</html>
=

【问题讨论】：

您看到初始淡入淡出效果的浏览器是什么？它不应该发生，因为文本的初始颜色是白色，它应该从白色过渡到白色。我会说您可能希望更改 #watermark:hover 上的转换以定位 color 属性...
我无法在我的计算机上重现此内容。您使用的是哪个浏览器，您是如何定义您的样式的？ <head> 中的 <style> 元素，还是外部 css 文件？
相同。我无法在我的计算机上重现此问题。你能告诉我们你看到了什么吗？
@olgark 我正在使用一个外部 css 文件，我在使用 chrome 和 opera 时遇到了这个问题，但它在 firefox 上运行良好。这是youtube video 我展示我的问题的地方

标签： html css

【解决方案1】：

这与 CSS 文件在 Chrome 中的加载方式有关，我很确定并非所有浏览器都会遇到此问题。一种解决方案是创建一个空白脚本标签来强制浏览器认为它是在我们的 CSS 之后加载到文件中的。看起来 Chrome 存在问题（请参阅下面的 STackOverflow 链接）。

HTML：

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="home.css">
        <script> </script>
    </head>

    <body>
        <div class="watermark">
                <p id="watermark">hover effect</p>
        </div>
    </body>

</html>

编辑：

这是一个 Stack Overflow 讨论的链接，详细介绍了这一点。我通读了一遍，发现了这个简单的修复方法。所以编辑我的答案。

Stop CSS transition from firing on page load

【讨论】：

很高兴我能出来！

【解决方案2】：

你的过渡声明应该是：

transition: color 2s linear;

【讨论】：