如何用纯JS实现悬停带数字后缀的card时隐藏其card-content

没问题，我来帮你搞定这个需求！下面是具体的实现步骤和代码：

实现思路 #

1. 先筛选出所有类名以card+数字结尾的<a>标签（比如card1、card2）
2. 给这些标签绑定鼠标悬停/离开的事件
3. 在事件触发时，控制内部.card-content元素的显示与隐藏

完整代码示例 #

HTML结构（基于你提供的代码） #

<div class="cards">
  <a href="#" class="card card1">
    <div class="card-content">
      <h2>Heading 1</h2>
      <p>Paragraph for card 1</p>
    </div>
  </a>
  <a href="#" class="card card2">
    <div class="card-content">
      <h2>Heading 2</h2>
      <p>Paragraph for card 2</p>
    </div>
  </a>
  <!-- 其他card... -->
</div>

JavaScript代码 #

// 1. 获取所有包含card类的a标签，然后过滤出类名以数字结尾的card元素
const cardLinks = Array.from(document.querySelectorAll('a.card'))
  .filter(link => {
    // 用正则匹配类名中是否有card+数字的格式
    return /\bcard\d+\b/.test(link.className);
  });

// 2. 给每个符合条件的a标签绑定事件
cardLinks.forEach(link => {
  // 鼠标悬停时隐藏card-content
  link.addEventListener('mouseenter', () => {
    const content = link.querySelector('.card-content');
    if (content) {
      // 方式1：直接修改样式
      content.style.display = 'none';
      
      // 方式2：推荐用CSS类控制（需要先定义.hidden类）
      // content.classList.add('hidden');
    }
  });

  // 鼠标离开时显示card-content
  link.addEventListener('mouseleave', () => {
    const content = link.querySelector('.card-content');
    if (content) {
      content.style.display = 'block'; // 或者flex/inline-block，根据你的布局调整
      // content.classList.remove('hidden');
    }
  });
});

可选CSS（如果用方式2的类控制） #

.hidden {
  display: none !important;
}

代码解释 #

• 筛选元素：用document.querySelectorAll('a.card')先拿到所有带card类的a标签，再通过正则/\bcard\d+\b/过滤出类名以数字结尾的card（\b是单词边界，避免匹配类似card100x这种不符合的类名）
• 事件绑定：用mouseenter和mouseleave事件（比mouseover/mouseout更合适，因为不会因为子元素冒泡触发多次）
• 显示控制：两种方式都可以，用CSS类的方式更灵活，方便后续修改样式逻辑

这样就能实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者sanu