Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change tabs on hover with CSS and JavaScript?
In this article, we will discuss how to change tabs on hover with CSS and JavaScript.
Hover Tabs are the easiest way to access the content of other tabs without leaving the current tab. When you hover over a tab that is not currently open, the content inside it will be displayed in a small window.
Let us suppose you are accessing the Google Chrome browser with two tabs: one tab with a blog and the other tab containing a social media network. When you hover over the tab with social media network tab while accessing the blog tab, the content page of the social media network is displayed in a small window.
We can create such hover tabs using the examples discussed in this article.
Example
Following is an example to create to change tabs on hover using CSS and JavaScript –
Example.css
Using CSS code, we style the buttons and provide their height and width, as well as the active class and adding hover effect.
<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
In this example using the HTML code we have created 3 div elements for 3 different tabs and, we have created 3 buttons namely HTML, CSS, and JAVASCRIPT.
In each button we are targeting the id of each div which calls the respective div elements.
<!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
In the JavaScript part, we trying to switch between the tabs when the user hover on the respective buttons and adding the active class.
<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>
Complete Example
<!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>
1K+ Views
