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:PreviewApproachCreate 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&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: Comment More infoAdvertise with us Next Article How to Change Tabs on Hover with CSS and JavaScript ? S shivanigupta18rk Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Change Tabs Horizontally on Hover with Tailwind CSS and JavaScript ? Changing tabs on hover in Tailwind CSS 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 visua 3 min read How to Change Image on hover with CSS ? To change an image on hover with CSS, use the :hover pseudo-class on the image element and alter its properties, such as background-image or content, to display a different image when hovered over. Here are some common approaches to changing the image on hover: Table of Content Using Background Imag 2 min read How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi 2 min read How to Create a Dropdown Menu with CSS & JavaScript ? A dropdown menu is a common user interface element that allows users to select from a list of options. It is often used in navigation bars or forms to conserve space and provide a clean user experience. Creating a dropdown menu involves a combination of CSS for styling and JavaScript for interactivi 3 min read Create a Hoverable Side Navigation with HTML, CSS and JavaScript To create hoverable side navigation with icon on any website there is a need for two things HTML and CSS. If you want to attach the icons on the navigation bar then you need a font-awesome CDN link. These features make the website looks cool than a normal website where the nav-bar is old-school desi 4 min read Like