How to Change Tabs on Hover with CSS and JavaScript ?
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:
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 themouseover
event on thebox
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: . 1 s 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% ; } } |
Output: