Как добавить onmouseout для вкладок, чтобы содержимое вкладок не отображалось при наведении мыши?

Question

Я пытаюсь добавить onmouseout для функции вкладки, и я использую пример вкладки w3schools, в котором есть onmouseover и который будет отображать tabcontent при наведении на tablink, но содержимое остается, и, вероятно, onmouseout решить мой вопрос, единственная проблема в том, что я понятия не имею, как обойти это. Спасибо!

Пример

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";
    }

    <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 city of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital city of Japan.</p>
    </div>

посмотрите, как это работает здесь

Answer 1

добавить мышиный слушатель на вашу вкладку div

const tabs = document.querySelector('.tab');

tabs.addEventListener("mouseout", function( event ) {    
      // Get all elements with class="tabcontent" and hide them
      const tabcontent = document.getElementsByClassName("tabcontent");

      for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "block";
      }
 }, false)

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";
 }
 
 const tabs = document.querySelector('.tab');
 
 tabs.addEventListener("mouseout", function( event ) {    
  // Get all elements with class="tabcontent" and hide them
  const tabcontent = document.getElementsByClassName("tabcontent");

  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "block";
  }
 }, false)

    <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 city of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital city of Japan.</p>
    </div>