How to Change Tabs on Hover with CSS and JavaScript ?

Last Updated : 27 Dec, 2023

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:

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.

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);
            });
    }
});

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%;
    }
}