调查这个问题已经一个多小时了，需要你们的帮助，我在互联网上找不到任何东西。我希望当鼠标悬停在图像上时更改为“home”之类的文本，鼠标移出时它会变回图像。 但该网页在导航栏上有多个链接，例如 - Home/About/Contact...
nav {
font-size: 40px;
}
nav:hover {
content: "home"
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<a href="#" class="fa fa-home"></a>
</nav>
</body>
</html>最佳答案
您可以使用 nav:hover::after 作为文本的选择器(即伪元素)，使用 position: absolute 和白色背景来覆盖/隐藏图标(和 nav 元素本身的 position: relative 使其成为绝对位置的 anchor )
nav {
font-size: 40px;
position: relative;
}
nav:hover:after {
content: "home";
position: absolute;
top: 0;
left: 0;
background: #fff;
}<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<a href="#" class="fa fa-home"></a>
</nav>
</body>关于javascript - 鼠标悬停时的 Css 从图像变为文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54009522/