📅 最后修改于: 2023-12-03 14:54:12.050000 🧑 作者: Mango
引导文本悬停效果通常可以用于网站导航栏或其他菜单栏的效果，当鼠标悬停在菜单项上时，它们将呈现出更具视觉吸引力的样式，以提醒用户该菜单项中的含义。在本文中，我们将介绍使用 HTML、CSS 和 JavaScript 来实现这种效果的方法。
HTML 是用于创建 Web 页面的标记语言。为了实现引导文本悬停效果，需要使用 HTML 中的链接标记，并为每个菜单项创建链接，用于指定要链接的 URL。
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
此 HTML 代码段将在页面上创建一个无序列表，其中包含 4 个菜单项链接。您可以将其安排为水平导航栏或垂直导航栏，具体取决于你的网站设计。
CSS 是用于为 HTML 网页添加样式的语言。我们将使用 CSS 添加样式以创建引导文本悬停效果。以下是一个基本的 CSS 样式示例，为菜单项链接添加了红色颜色样式：
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
上述 CSS 代码将为链接添加默认样式，并在鼠标悬停在链接上时更改颜色和添加下划线。
JavaScript 是一种基于 Web 的编程语言。在我们的例子中，我们将使用 JavaScript 创建菜单项悬停效果，并根据用户的行为来触发效果。
const menuItems = document.querySelectorAll('a');
menuItems.forEach(item => {
item.addEventListener('mouseover', () => {
item.classList.add('hovered');
});
item.addEventListener('mouseout', () => {
item.classList.remove('hovered');
});
});
以上 JavaScript 代码将选取所有链接元素，并为每个链接元素添加鼠标悬停事件。事件处理程序使用 classList，在鼠标悬停时添加一个名为 hovered 的类，当鼠标移开时删除该类。
以下是完整的 HTML、CSS 和 JavaScript 代码，用于演示引导文本悬停效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Menu Hover Effect</title>
<style>
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
.hovered {
background-color: gray;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<script>
const menuItems = document.querySelectorAll('a');
menuItems.forEach(item => {
item.addEventListener('mouseover', () => {
item.classList.add('hovered');
});
item.addEventListener('mouseout', () => {
item.classList.remove('hovered');
});
});
</script>
</body>
</html>
请注意，可以在实现效果时进行其他样式和 JavaScript 的自定义。