如何为标签添加onmouseout，以便在鼠标移出时不会显示标签内容？

Question

我正在尝试为选项卡功能添加onmouseout，并且我使用的是w3schools选项卡示例，该示例具有onmouseover，并且在将鼠标悬停在tablink上时会显示tabcontent，但是内容保留在其中，并且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>

查看其工作原理here

Answer 1

将mouseout侦听器添加到标签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>