Onmouseout for tabs

by Mitos   Last Updated May 15, 2019 17:08 PM - source

I'm trying to add an onmouseout for a tab function and I'm using w3schools tab example, which has an onmouseover and that would show the tabcontent when hovering on tablink, but the content stays in, and an onmouseout would probably solve my question, the only problem is that I have no idea how to get around that. Thanks!

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="London 2" class="tabcontent">
  <h3>London</h3>
  <p>London 2 is the capital city of England.</p>
</div>

Javascript

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";
}
Tags : javascript tabs


Related Questions


Switch to the library tab in the media uploader

Updated May 01, 2017 12:08 PM

Google Map iframe in a tab issue

Updated July 07, 2016 08:03 AM


Add nested tabs in wordpress

Updated April 24, 2017 12:08 PM

My Top Watch Tab

Updated September 05, 2017 22:08 PM