How to Change Tabs on Hover with CSS and JavaScript ?
Last Updated :
24 Jul, 2024
Improve
In this article, we are going to learn how can we change tabs on hover, with CSS and JavaScript. Changing tabs on hover enhances the user experience by offering interactive hover navigation. Users can quickly preview different sections without clicking which reduces the time it takes to explore different sections and increase engagement. we can also add CSS transitions for visual effects.
Preview image:

Approach
- Create the basic structure of the web page using HTML elements. Integrate the FontAwesome icons via the CDN link on each navigation tab. Make the external stylesheet style each element with different CSS properties including margin, padding, transition, etc.
box.addEventListener
is setting up an event listener for themouseover
event on thebox
element. This callback function is executed on hover.- And the index will be used to identify the specified
textboxcontainer
.
Example: The example shows how to make tabs on hover with HTML CSS, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Change tabs on hover</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>
<body>
<div class="box" id="boxid">
<div class="navlist">
<i class="fa fa-brands fa-html5"></i>
HTML
</div>
<div class="navlist">
<i class="fa fa-brands fa-css3"></i>
CSS
</div>
<div class="navlist">
<i class="fa fa-brands fa-js"></i>
JavaScript
</div>
<div class="navlist">
<i class="fa fa-brands fa-react"></i>
React
</div>
</div>
<div class="textbox">
<div class="textboxcontainer active">
HTML stands for HyperText Markup Language.
It creates a complete website structure of
web pages. HTML is a combination of Hypertext
and Markup language. Hypertext defines the link
between the web pages and markup language defines
the text document within the tag that defines the
structure of web pages. This HTML Tutorial provides
basic to advanced HTML concepts for beginners and
professionals.
</div>
<div class="textboxcontainer">
This CSS tutorial, whether you are a student or a
professional is a valuable resource to enhance the
visual appeal of your websites or personal blogs.
Here, you will learn CSS all the basic to advanced
concepts, such as properties, selectors, functions,
media queries and more. CSS is used to enhance the
visual presentation of web pages. Without the use
of CSS, a web page will appear visually unappealing.
</div>
<div class="textboxcontainer">
JavaScript (JS) is the most popular lightweight,
interpreted compiled programming language. It can
be used for both Client-side as well as Server-side
developments. JavaScript also known as a scripting
language for web pages. This JavaScript Tutorial is
designed to help both beginners and experienced
professionals master the fundamentals of JavaScript
and unleash their creativity to build powerful web
applications. From basic syntax and data types to
advanced topics such as object-oriented
programming and DOM manipulation.
</div>
<div class="textboxcontainer">
ReactJS is a declarative, efficient, and flexible
JavaScript library for building user interfaces.
It is an open-source, component-based front-end
library that is responsible only for the view
layer of the application. ReactJS is not a framework,
it is just a library developed by Facebook to
solve some problems that we were facing earlier.
</div>
</div>
<script src="index.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
margin: 0;
background-color: rgb(194, 229, 166);
font-family: 'Poppins', sans-serif;
}
.box {
display: flex;
background-color: #367a46;
overflow: hidden;
}
i {
margin-right: 5px;
}
.navlist {
padding: 14px 16px;
color: rgb(243, 250, 243);
text-align: center;
font-size: 20px;
text-decoration: none;
cursor: pointer;
transition: .1s linear;
}
.navlist:hover {
background-color: #278237;
color: rgb(248, 254, 247);
transform: translateY(7px);
}
.textbox {
padding: 20px;
}
.textboxcontainer {
display: none;
font-size: 20px;
}
.textboxcontainer.active {
display: block;
}
@media screen and (max-width: 600px) {
.box {
flex-direction: column;
}
.navlist {
width: 100%;
}
}
const box = document.getElementById('boxid')
box.addEventListener('mouseover', (event) => {
const target = event.target;
if (target.classList.contains('navlist')) {
const tabIdx =
Array.from(target.parentNode.children)
.indexOf(target);
document.querySelectorAll('.textboxcontainer')
.forEach((textboxcontainer, index) => {
textboxcontainer
.classList.toggle('active', index === tabIdx);
});
}
});
Output: