How to Create Hover Tabs / change tabs on hover, with CSS and JavaScript

Step 1) Add HTML:

<h2>Hover Tabs</h2>
<p>Move the mouse over a button inside the tabbed menu:</p>

<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>

<div class="clearfix"></div>

Step 2) Add CSS:

Style the buttons and the tab content:

* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color:#EBF4FA;
  width: 30%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: inherit;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #357EC7;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #357EC7;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  background-color:#EBF4FA;
  border-left: none;
  height: 300px;
  display: none;
}

/* Clear floats after the tab */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Step 3) Add JavaScript:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

Final Output :

<br /> See the Pen <a href='https://codepen.io/adaptabiz/pen/yLMqLoV'>Hover Tabs</a> by adaptabiz<br /> (<a href='https://codepen.io/adaptabiz'>@adaptabiz</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

How to Create Hover Tabs / change tabs on hover, with CSS and JavaScript

How to add Typing Effect / Type Writer Effect to your text Using JavaScript

By Richard / June 5, 2022

How to add Typing Effect / Type Writer Effect to your text Using JavaScript Step 1) Add HTML: <h1>Typewriter</h1>...

How to Create a full screen video background using HTML, CSS

By Richard / May 22, 2022

Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class="videobg"> <video src="https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4" loop muted...

How to Create an Off-Canvas Menu / Side Bar Navigation

By Richard / April 29, 2022

How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn"...

How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript

By Richard / April 19, 2022

How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript Step 1 : Adding...

How to Create Weight Converter using HTML and JavaScript

By Richard / April 2, 2022

How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound...

How to create a Scroll indicator with CSS and JavaScript

By Richard / February 19, 2022

How to create a Scroll indicator with CSS and JavaScript Step 1) Add HTML: <div class="header"> <h2>Scroll Indicator</h2> <div...

How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)

By Richard / February 15, 2022

Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very...

How to Create a JavaScript Countdown Timer

By Richard / February 4, 2022

There are many a times, when you’re going to need a countdown clock for your project. You may have an...

How to Create an Avatar image with CSS

By Richard / January 20, 2022

How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img...

How to Change Background Images on Scroll with CSS.

By Richard / January 13, 2022

How to Change Background Images on Scroll with CSS. Step 1) Add HTML: <div class="bg-image img1"></div> <div class="bg-image img2"></div>...