FFan丶Blog

要实现两个列表之间通过鼠标悬停列表名来切换显示内容的功能，你可以使用HTML、CSS和JavaScript。下面是一个简单的例子，演示了如何实现这一功能：

HTML:

<div class="list-switcher">
  <h2 class="list-title active" data-target="list1">列表1</h2>
  <h2 class="list-title" data-target="list2">列表2</h2>

  <ul id="list1" class="list active">
    <li>项目1-1</li>
    <li>项目1-2</li>
    <li>项目1-3</li>
  </ul>
  <ul id="list2" class="list">
    <li>项目2-1</li>
    <li>项目2-2</li>
    <li>项目2-3</li>
  </ul>
</div>

CSS：

.list-switcher {
  position: relative;
}

.list-title {
  cursor: pointer;
  /* 添加悬停样式 */
}

.list-title.active {
  /* 添加活动状态的样式 */
}

.list {
  display: none;
  /* 列表默认隐藏 */
}

.list.active {
  display: block;
  /* 活动列表显示 */
}

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var listTitles = document.querySelectorAll('.list-title');
  var lists = document.querySelectorAll('.list');

  listTitles.forEach(function(listTitle) {
    listTitle.addEventListener('mouseover', function() {
      // 移除所有列表和活动标题的类
      lists.forEach(function(list) {
        list.classList.remove('active');
      });
      listTitles.forEach(function(title) {
        title.classList.remove('active');
      });

      // 给当前标题和对应列表添加活动类
      listTitle.classList.add('active');
      var targetList = document.getElementById(listTitle.dataset.target);
      if (targetList) {
        targetList.classList.add('active');
      }
    });
  });
});

在这个例子中，.list-switcher是包含列表标题和列表的容器。每个列表标题（<h2>元素）都有一个data-target属性，该属性的值与对应列表的id相匹配。当鼠标悬停在列表标题上时，JavaScript代码会移除所有列表和列表标题的active类，然后只给当前悬停的列表标题和对应的列表添加active类。CSS规则则定义了.active类使得对应的列表显示出来。

请确保你的HTML、CSS和JavaScript代码都正确加载，并且JavaScript代码在DOM完全加载后执行（通过监听DOMContentLoaded事件或使用jQuery的$(document).ready()方法）。

这样，当你把鼠标移到不同的列表标题上时，对应的列表就会显示出来，而其他列表则会隐藏。

赏 支付宝打赏 微信打赏

如果文章对你有帮助，欢迎点击上方按钮打赏作者

版权声明：若无特殊注明，本文皆为( FFan )原创，转载请保留文章出处。