How To Change Tabs on Hover https://www.w3schools.com/howto/howto_js_hover_tabs.

asp

 Tutorials  References  Exercises  Menu  Log in

Website NEW Paid Courses

  HTML CSS JAVASCRIPT SQL   

How TO - Hover Tabs

❮ Previous Next ❯

Learn how to change tabs on hover, with CSS and JavaScript.

Hover Tabs
Move the mouse over one of the menu buttons to show the tab content:

London London
London is the capital city of England.
Paris

Tokyo

1 of 7 1/25/2022, 11:42 PM
How To Change Tabs on Hover https://www.w3schools.com/howto/howto_js_hover_tabs.asp

Try it Yourself »

Create Hoverable Vertical Tabs

Step 1) Add HTML:

Example

<div class="tab">
<button class="tablinks" onmouseover="openCity(event,
'London')">London</button>
<button class="tablinks" onmouseover="openCity(event,
'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event,
'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">

<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">

<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">

<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

Create buttons to open the specific tab content. All <div> elements with
class="tabcontent" are hidden by default (with CSS & JS) - when the user move
the mouse over a button - it will open the tab content that "matches" this button.

2 of 7 1/25/2022, 11:42 PM
How To Change Tabs on Hover https://www.w3schools.com/howto/howto_js_hover_tabs.asp

Step 2) Add CSS:

Style the buttons and the tab content:

Example

/* Style the tab */

.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
}

/* Change background color of buttons on hover */

.tab button:hover {
background-color: #ddd;
}

/* Create an active/current "tab button" class */

.tab button.active {
background-color: #ccc;
}

/* Style the tab content */

.tabcontent {

3 of 7 1/25/2022, 11:42 PM
How To Change Tabs on Hover https://www.w3schools.com/howto/howto_js_hover_tabs.asp

float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}

Step 3) Add JavaScript:

Example

function openCity(evt, cityName) {

// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them

tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the link that opened
the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

4 of 7 1/25/2022, 11:42 PM
How To Change Tabs on Hover https://www.w3schools.com/howto/howto_js_hover_tabs.asp

Try it Yourself »

Tip: Also check out How To - Tabs.

❮ Previous Next ❯

NEW

We just launched
W3Schools videos

Explore now

COLOR PICKER



Get certified
by completing

5 of 7 1/25/2022, 11:42 PM
How To Change Tabs on Hover https://www.w3schools.com/howto/howto_js_hover_tabs.asp

a course today!

school
w3 s

2
CE

02
TI 2

R
FI .
ED

Get started

CODE GAME

Play Game

Report Error Forum About Shop

Top Tutorials Top References

HTML Tutorial HTML Reference

6 of 7 1/25/2022, 11:42 PM
How To Change Tabs on Hover https://www.w3schools.com/howto/howto_js_hover_tabs.asp

CSS Tutorial CSS Reference

JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference

Top Examples Web Courses

HTML Examples HTML Course
CSS Examples CSS Course
JavaScript Examples JavaScript Course
How To Examples Front End Course
SQL Examples SQL Course
Python Examples Python Course
W3.CSS Examples PHP Course
Bootstrap Examples jQuery Course
PHP Examples Java Course
Java Examples C++ Course
XML Examples C# Course
jQuery Examples XML Course

Get Certified »

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and
learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot
warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our
terms of use, cookie and privacy policy.

Copyright 1999-2022 by Refsnes Data. All Rights Reserved.

W3Schools is Powered by W3.CSS.

7 of 7 1/25/2022, 11:42 PM