如何使用 CSS 和 JavaScript 更改悬停标签?
javascriptweb developmentfront end technology更新于 2024/6/15 4:34:00
在本文中，我们将讨论如何使用 CSS 和 JavaScript 更改悬停标签。
悬停标签是在不离开当前标签的情况下访问其他标签内容的最简单方法。当您将鼠标悬停在当前未打开的标签上时，其中的内容将显示在一个小窗口中。
假设您正在使用两个标签访问 Google Chrome 浏览器:一个标签包含博客，另一个标签包含社交媒体网络。当您在访问博客选项卡时将鼠标悬停在带有社交媒体网络选项卡的选项卡上时，社交媒体网络的内容页面将显示在一个小窗口中。
我们可以使用本文中讨论的示例创建此类悬停选项卡。
示例
以下是使用 CSS 和 JavaScript 创建悬停时更改选项卡的示例 -
Example.css
使用 CSS 代码，我们设置按钮样式并提供其高度和宽度，以及活动类并添加悬停效果。
<style>
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
height: 100vh;
display: grid;
place-items: center;
}
.tab-container {
width: 992px;
}
.row {
display: flex;
}
.col-3,
.col-9 {
padding: 0.5rem;
}
.col-3 {
width: 24.9%;
}
.col-9 {
width: 75.1%;
}
.btn {
display: block;
margin: 0.75rem 0;
width: 100%;
padding: 0.75rem;
border: none;
outline: none;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 1.1rem;
}
.btn.active {
background-color: #fff;
box-shadow: 1px 1px 4px 0 #ccc;
border: 1px solid #ccc;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
span {
color: red;
font-weight: bold;
}
</style>
Example.html
在此示例中，我们使用 HTML 代码为 3 个不同的选项卡创建了 3 个 div 元素，并且创建了 3 个按钮，即 HTML、CSS 和 JAVASCRIPT。
在每个按钮中，我们都以调用相应 div 元素的每个 div 的 id 为目标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Tab</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="tab-container">
<div class="row">
<div class="col-3">
<button class="btn" data-target="#html">HTMl</button>
<button class="btn active" data-target="#CSS">CSS</button>
<button class="btn" data-target="#js">JAVASCRIPT</button>
</div>
<div class="col-9">
<div class="tab-content" id="html">
<h3>HTML</h3>
<p>This is <span> HTML</span></p>
</div>
<div class="tab-content active" id="CSS">
<h3>CSS</h3>
<p>This is <span>CSS</span></p>
</div>
<div class="tab-content" id="js">
<h3>JavaScript</h3>
<p>This is <span>JavaScript</span></p>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Example.js
在 JavaScript 部分，我们尝试在用户将鼠标悬停在相应按钮上时在选项卡之间切换并添加活动类。
<script>
const btns = document.querySelectorAll(".btn");
const tabContents = document.querySelectorAll(".tab-content");
btns.forEach((btn) => {
btn.addEventListener("mouseover", () => {
btns.forEach((btn) => btn.classList.remove("active"));
tabContents.forEach((tabContent) => tabContent.classList.remove("active"));
btn.classList.add("active");
document.querySelector(btn.dataset.target).classList.add("active");
});
});
</script>
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vertical Tab</title>
<style>
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
height: 100vh;
display: grid;
place-items: center;
}
.tab-container {
width: 992px;
}
.row {
display: flex;
}
.col-3,
.col-9 {
padding: 0.5rem;
}
.col-3 {
width: 24.9%;
}
.col-9 {
width: 75.1%;
}
.btn {
display: block;
margin: 0.75rem 0;
width: 100%;
padding: 0.75rem;
border: none;
outline: none;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 1.1rem;
}
.btn.active {
background-color: #fff;
box-shadow: 1px 1px 4px 0 #ccc;
border: 1px solid #ccc;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="tab-container">
<div class="row">
<div class="col-3">
<button class="btn" data-target="#html">HTMl</button>
<button class="btn active" data-target="#CSS">CSS</button>
<button class="btn" data-target="#js">JAVASCRIPT</button>
</div>
<div class="col-9">
<div class="tab-content" id="html">
<h3>HTML</h3>
<p>This is <span> HTML</span></p>
</div>
<div class="tab-content active" id="CSS">
<h3>CSS</h3>
<p>This is <span>CSS</span></p>
</div>
<div class="tab-content" id="js">
<h3>JavaScript</h3>
<p>This is <span>JavaScript</span></p>
</div>
</div>
</div>
</div>
<script>
const btns = document.querySelectorAll(".btn");
const tabContents = document.querySelectorAll(".tab-content");
btns.forEach((btn) => {
btn.addEventListener("mouseover", () => {
btns.forEach((btn) => btn.classList.remove("active"));
tabContents.forEach((tabContent) =>
tabContent.classList.remove("active")
);
btn.classList.add("active");
document.querySelector(btn.dataset.target).classList.add("active");
});
});
</script>
</body>
</html>
