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 visual effects.
Preview:
Approach:
-
The body element contains a flex container (
div.flex
) at the top of the page with three tabs (div.tab
elements) for HTML, Tailwind, and JavaScript. -
The content for each tab is placed in
div.tab-content
elements, and initially, all content is hidden (class="tab-content hidden"
). - The script selects all elements with the class .tab and .tab-content. These elements represent the tabs and their corresponding content, respectively.
- For each tab element, an event listener is added for the mouseenter event. This means when the mouse hovers over a tab, the associated content will be displayed.
- When a tab is hovered over, the script hides all tab contents by removing the active class from each content element.
- The script then identifies the ID of the content associated with the hovered tab using the data-tab attribute. It adds the active class to the corresponding content element, making it visible.
Example: Illustration of changing Tabs horizontally on Hover with Tailwind CSS and JavaScript.
Javascript
// Get all tab elements const tabs = document.querySelectorAll( '.tab' );
const tabContents = document.querySelectorAll( '.tab-content' );
// Loop through each tab tabs.forEach((tab) => { tab.addEventListener( 'mouseenter' , () =>
{
// Hide all tab contents
tabContents.forEach((content) =>
{
content.classList.remove( 'active' )
})
// Show the corresponding tab content
const tabId = tab.getAttribute( 'data-tab' )
document.getElementById(tabId).classList.add( 'active' )
})
}) |
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
< title >Horizontal Tab Hover with
Tailwind CSS and JavaScript
</ title >
< link rel = "stylesheet" href = "style.css" >
<!-- Tailwind CSS CDN link -->
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "flex bg-green-500 py-3 top-0" >
< div class="tab cursor-pointer px-8 py-4 transition
duration-300 hover:bg-gray-100 transform
hover:translate-y-1"
data-tab = "tab1" >HTML</ div >
< div class="tab cursor-pointer px-8 py-4 transition
duration-300 ease-in-out hover:bg-gray-100
transform hover:translate-y-1"
data-tab = "tab2" >Tailwind</ div >
< div class="tab cursor-pointer px-8 py-4 transition
duration-300 ease-in-out hover:bg-gray-100
transform hover:translate-y-1"
data-tab = "tab3" >Javascript</ div >
</ div >
<!-- Tab contents -->
< div class = "mt-4" >
< div class = "tab-content hidden" id = "tab1" >
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.
This HTML Tutorial provides basic to advanced concepts
for beginners and professionals.
</ div >
< div class = "tab-content hidden" id = "tab2" >
Tailwind CSS is basically a Utility first CSS framework
for building rapid custom UI. It is a highly customizable,
low-level CSS framework that gives you all of the building
blocks that you need. Also, it is a cool way to write inline
styling and achieve an awesome interface without writing a
single line of your own CSS.
</ div >
< div class = "tab-content hidden" id = "tab3" >
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. It is also
known as a scripting language for web pages. This free
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 >
< script src = "index.js" ></ script >
</ body >
</ html >
|
CSS
.tab-content.active { display : block ;
} .tab:not(:hover) { /* Back to Original background color on mouse remove */
background-color : #10B981 ;
} |
Output: