Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to change tabs on hover with CSS and JavaScript?

Javascript Web Development Front End Technology

In this article, we will discuss how to change tabs on hover with CSS and JavaScript.

Hover Tabs are an interactive UI pattern that allows users to switch between different content sections by simply hovering over tab buttons. When you move your cursor over a tab, its associated content is immediately displayed without requiring a click.

This creates a smooth, responsive user experience where content changes dynamically as users explore different options. For example, in a product showcase, hovering over different category tabs could instantly display relevant products.

How It Works

The hover tab system combines three technologies:

  • HTML: Creates the tab structure with buttons and content panels
  • CSS: Styles the tabs and controls visibility of content
  • JavaScript: Handles the hover events and switches active states

Complete Example

Here's a complete working example that demonstrates hover tabs for web technologies:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Hover Tabs Example</title>
   <style>
   body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
   }

   .tab-container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   }

   .row {
      display: flex;
   }

   .col-3 {
      width: 25%;
      background-color: #f8f9fa;
   }

   .col-9 {
      width: 75%;
      padding: 2rem;
   }

   .btn {
      display: block;
      width: 100%;
      padding: 1rem;
      border: none;
      background-color: transparent;
      cursor: pointer;
      font-size: 1rem;
      text-align: left;
      transition: all 0.3s ease;
      border-bottom: 1px solid #e9ecef;
   }

   .btn:hover {
      background-color: #e9ecef;
   }

   .btn.active {
      background-color: #007bff;
      color: white;
   }

   .tab-content {
      display: none;
   }

   .tab-content.active {
      display: block;
      animation: fadeIn 0.3s ease;
   }

   @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
   }

   .highlight {
      color: #007bff;
      font-weight: bold;
   }
   </style>
</head>
<body>
   <div class="tab-container">
      <div class="row">
         <div class="col-3">
            <button class="btn active" data-target="#html">HTML</button>
            <button class="btn" data-target="#css">CSS</button>
            <button class="btn" data-target="#js">JavaScript</button>
         </div>
         <div class="col-9">
            <div class="tab-content active" id="html">
               <h3>HTML - Structure</h3>
               <p><span class="highlight">HTML</span> (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure of a web page using elements and tags.</p>
               <ul>
                  <li>Creates page structure</li>
                  <li>Uses semantic elements</li>
                  <li>Foundation of web development</li>
               </ul>
            </div>
            <div class="tab-content" id="css">
               <h3>CSS - Styling</h3>
               <p><span class="highlight">CSS</span> (Cascading Style Sheets) is used to style and layout web pages. It controls the presentation, including colors, fonts, and positioning.</p>
               <ul>
                  <li>Controls visual appearance</li>
                  <li>Responsive design capabilities</li>
                  <li>Animations and transitions</li>
               </ul>
            </div>
            <div class="tab-content" id="js">
               <h3>JavaScript - Interactivity</h3>
               <p><span class="highlight">JavaScript</span> is a programming language that enables interactive web pages. It handles user interactions, dynamic content updates, and client-side logic.</p>
               <ul>
                  <li>Dynamic content manipulation</li>
                  <li>Event handling</li>
                  <li>API interactions</li>
               </ul>
            </div>
         </div>
      </div>
   </div>

   <script>
   const btns = document.querySelectorAll(".btn");
   const tabContents = document.querySelectorAll(".tab-content");

   btns.forEach((btn) => {
      btn.addEventListener("mouseenter", () => {
         // Remove active class from all buttons and content
         btns.forEach((b) => b.classList.remove("active"));
         tabContents.forEach((content) => content.classList.remove("active"));
         
         // Add active class to hovered button and its target content
         btn.classList.add("active");
         const targetContent = document.querySelector(btn.dataset.target);
         targetContent.classList.add("active");
      });
   });
   </script>
</body>
</html>

JavaScript Functionality

The JavaScript code uses event listeners to handle hover interactions:

const btns = document.querySelectorAll(".btn");
const tabContents = document.querySelectorAll(".tab-content");

btns.forEach((btn) => {
   btn.addEventListener("mouseenter", () => {
      // Remove active class from all elements
      btns.forEach((b) => b.classList.remove("active"));
      tabContents.forEach((content) => content.classList.remove("active"));
      
      // Activate hovered tab
      btn.classList.add("active");
      document.querySelector(btn.dataset.target).classList.add("active");
   });
});

Key Features

  • Instant Response: Content changes immediately on hover
  • Smooth Transitions: CSS animations provide visual feedback
  • Data Attributes: Clean connection between buttons and content
  • Responsive Design: Adapts to different screen sizes

Use Cases

Hover tabs work well for:

  • Product category browsing
  • Feature comparisons
  • Documentation navigation
  • Image galleries with descriptions

Conclusion

Hover tabs provide an intuitive way to browse content without clicking. The combination of CSS styling and JavaScript event handling creates a smooth, responsive user experience that enhances website interactivity.

Updated on: 2026-03-15T23:18:59+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements