我创建了一个 HTML 网页，当您将鼠标悬停在某个元素上时，下划线应该会逐渐变成红色。但相反，它闪烁白色，然后逐渐变为红色。我该如何解决这个问题？
.nav a {
font-size : 35px;
color : white;
text-decoration : none;
position : relative;
right : -100px;
bottom : -20px;
transition : 0.5s;
opacity : 1;
}
.nav a:hover {
text-decoration : red underline;
}
最佳答案
这是因为 CSS 过渡总是需要一个起始值。否则它无法将属性更改为所需的值。
所以在您的示例中，您的过渡从“无”变为红色下划线。因此浏览器只是添加了白色下划线(默认下划线)然后变为红色。
您可以尝试使用透明作为底色:
body {
background: green;
}
nav a {
font-size : 35px;
color : white;
text-decoration : transparent underline; /* This line has changed */
position : relative;
right : -100px;
bottom : -20px;
transition : 0.5s;
opacity : 1;
}
nav a:hover {
text-decoration : red underline;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<nav>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</nav>
</body>
</html>关于html - 将鼠标悬停在 HTML 上，元素下划线闪烁白色然后淡入红色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58670930/