javascript - 如何为选项卡添加 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>