我正试图在悬停div元素时使用背景色制作一个过渡效果。颜色的变化完全符合我的预期(3秒内从红色变为黑色(。但是，每当浏览器打开或刷新我的HTML页面时，该元素都会收到不希望的淡入效果。
为了检查这种情况是否会发生在其他HTML元素上，我还尝试将相同的CSS转换应用于文本元素。因此，当页面打开时，文本会从黑色变为红色。这也是不可取的，因为当我悬停时，文本应该从红色开始，然后变成黑色
这是我的代码：
body {
margin: 0;
}
.exemplo1 {
margin: auto;
margin-top: 100px;
width: 200px;
height: 200px;
background-color: #F00;
transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-o-transition: background-color 3s linear;
-webkit-transition: background-color 3s linear;
}
.exemplo1:hover {
background-color: #000;
}
p {
color: #F00;
font-size: 25px;
font-weight: bold;
transition: color 3s linear;
-moz-transition: color 3s linear;
-o-transition: color 3s linear;
-webkit-transition: color 3s linear;
}
p:hover {
color: #000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Página de Teste</title>
<link rel="stylesheet" href="transicoes.css" />
</head>
<body>
<div class="exemplo1"></div>
<p>Ola mundo!</p>
</body>
</html>以下是该文件在Google Chrome上的打开方式：https://youtu.be/o6LdihbZIBU
谷歌Chrome、Opera和微软Edge都出现了这种情况，但火狐却没有。我使用VS代码作为我的文本编辑器。
你们知道为什么会发生这种事吗？
转换基本上是从状态a转移到状态B。当网站打开或刷新时，你会得到一个渐变元，因为你声明元素的默认状态应该从开始
示例-1和p都有其默认状态的转换。
尝试将转换移动到：悬停状态，例如：
代替：
p {
color: #F00;
font-size: 25px;
font-weight: bold;
transition: color 3s linear;
}
p:hover {
color: #000;
}
成功：
p {
color: #F00;
font-size: 25px;
font-weight: bold;
}
p:hover {
color: #000;
transition: color 3s linear;
}
或者，您可以为处于默认状态的元素和处于悬停状态的其他元素声明一个0s转换，但如果您刚刚开始熟悉这个概念，就没有必要使事情复杂化。
这是由于您在每个初始语句中使用了转换元素。您的代码可能看起来像这样，以达到您想要的效果。
.exemplo1 {
margin: auto;
margin-top: 100px;
width: 200px;
height: 200px;
background-color: #F00;
}
.exemplo1:hover {
background-color: #000;
transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-o-transition: background-color 3s linear;
-webkit-transition: background-color 3s linear;
}
p {
color: #F00;
font-size: 25px;
font-weight: bold;
}
p:hover {
color: #000;
transition: color 3s linear;
-moz-transition: color 3s linear;
-o-transition: color 3s linear;
-webkit-transition: color 3s linear;
}
在"；非悬停"；当HTML场景加载到视图中时，状态将使其淡入或淡出。将其添加到：悬停将允许在悬停时进行转换。希望这能有所帮助！