添加IntersectionObserver淡入效果后卡片:hover交互失效问题

我在.card-group容器里有8个卡片div，原本鼠标hover卡片时会触发展开效果（大卡片移动旋转，小卡片移至边缘），功能正常。但添加底部文本区域和基于IntersectionObserver的元素淡入效果后，原本的hover交互完全失效，不过淡入功能正常。相关代码如下：

JavaScript 代码 #

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) =>{
      if (entry.isIntersecting) {
        entry.target.classList.add('visible'); // Use a different class for visibility
      } else {
        entry.target.classList.remove('visible');
      }
    });
  });
  
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((element) => observer.observe(element));
  
const cards = document.querySelectorAll('.card');
  
cards.forEach(card => {
  card.addEventListener('mouseenter', () => {
      console.log(card)
    card.classList.add('hovered');
  });

  card.addEventListener('mouseleave', () => {
    card.classList.remove('hovered');
  });
});

CSS 代码 #

.hidden {
    opacity: 0;
    transition: all 1s;
    filter: blur(5px);
    transform: translateX(-100%);
}
.visible {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
}

.card-group:hover .big-card:nth-child(1) {
    transform: translate(-75%,16%) rotate(-24deg);
    cursor: pointer;
}

HTML 代码 #

<div class="card-group">
  <div class="big-card card"></div>
  <div class="little-card card"></div>
  <div class="big-card card"></div>
  <div class="little-card card"></div>
  <div class="big-card card"></div>
  <div class="little-card card"></div>
  <div class="big-card card "></div>
  <div class="little-card card"></div>
</div>
<section class="hidden">
  <h1>Cats and Dogs in a deck</h1>
</section>
<section class="hidden">
  <p class="p1 hidden">This effeect took forever, like forever 2+ hours this was the first real thing I did in html, css, and js. P.S Hover over it to get a suprise</p>
</section>
<section class="hidden">
  <p class="p1 hidden">Now for  a cool effect This text is here so I can implement this cool scrolling effect I saw it on the github copilot page and really liked it so I will try to do it</p>
</section>
<section class="hidden">
  <p class="p1 hidden">You will be able too tell if it's working if this text is "sliding" in hopefully a cool style</p>
</section>
<section class="hidden">
  <p class="p1 hidden">Hi everyone, this is my website hope you enjoyed it took me FOREVER and I learned the basics of js, html, and css, it was fun!</p> 
</section>

修复方案 #

1. 给卡片添加可交互区域

你的卡片是空div且未设置基础尺寸，导致鼠标无法触发hover事件。补充卡片的基础样式：

.card {
  width: 200px;
  height: 300px;
  background: #fff;
  border: 1px solid #ddd;
  position: relative;
  margin: 10px;
  transition: transform 0.3s ease;
}

.big-card {
  width: 250px;
  height: 350px;
}

.little-card {
  width: 150px;
  height: 200px;
}

2. 解决CSS样式冲突

.visible类的transition: all 1s可能干扰卡片的hover动画，可给hover样式提升优先级，或给卡片单独设置transition：

.card-group:hover .big-card:nth-child(1) {
  transform: translate(-75%,16%) rotate(-24deg) !important;
  cursor: pointer;
}

3. 匹配JS事件的CSS样式

你的JS给卡片添加了hovered类，但CSS未对应该样式。如果要使用JS触发的hover效果，补充：

.card.hovered {
  /* 自定义卡片hover后的样式，例如： */
  transform: scale(1.05);
}

4. 避免元素遮挡

检查底部section是否覆盖了卡片容器，调整z-index确保卡片可被hover：

.card-group {
  position: relative;
  z-index: 1;
}

section {
  position: relative;
  z-index: 0;
}

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