Open In App

How to Change Tabs on Hover with CSS and JavaScript ?

Last Updated : 24 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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:

hover
Preview

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 the mouseover event on the box 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.

HTML 
<!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>
CSS 
@import url('https://fonts.googleapis.com/css2?family=Poppins&amp;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%;
    }
}
JavaScript 
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:


Next Article
How to Change Tabs on Hover with CSS and JavaScript ?

S
shivanigupta18rk
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox