卡牌重叠状态检测与hover事件禁用方案求助

一、基于状态绑定的简便方案（优先推荐） #

既然你明确知道中间翻转的紫色卡牌会遮挡上下卡牌，完全不用做复杂的可见性检测，直接通过卡牌的翻转状态来关联控制pointer-events即可：

1. 先给被遮挡时的卡牌加个禁用hover的CSS类：

.card.no-hover {
  pointer-events: none;
}

2. 在中间卡牌翻转的逻辑里，动态给上下卡牌添加/移除这个类：

// 假设触发中间卡牌翻转的函数
function toggleMiddleCard() {
  const middleCard = document.querySelector('.card-middle');
  const topCard = document.querySelector('.card-top');
  const bottomCard = document.querySelector('.card-bottom');
  
  middleCard.classList.toggle('flipped');
  // 根据翻转状态切换hover禁用
  const shouldBlock = middleCard.classList.contains('flipped');
  topCard.classList.toggle('no-hover', shouldBlock);
  bottomCard.classList.toggle('no-hover', shouldBlock);
}

这个方案代码少、性能高，完全贴合你的场景，不用额外做检测逻辑。

二、自动检测元素遮挡的通用方案 #

如果需要适配更复杂的遮挡场景（比如卡牌位置动态变化、不确定遮挡源），可以用以下两种方法：

方法1：用elementFromPoint检测采样点 #

核心思路是在目标卡牌上选几个采样点，检查这些点是否被其他元素覆盖，超过一定比例就判定为被遮挡：

function checkCardIsCovered(card) {
  const rect = card.getBoundingClientRect();
  // 定义采样点（四个角+中心，可按需增加）
  const checkPoints = [
    {x: rect.left, y: rect.top},
    {x: rect.right, y: rect.top},
    {x: rect.left, y: rect.bottom},
    {x: rect.right, y: rect.bottom},
    {x: rect.left + rect.width/2, y: rect.top + rect.height/2}
  ];

  let coveredCount = 0;
  checkPoints.forEach(point => {
    const elementAtPoint = document.elementFromPoint(point.x, point.y);
    // 采样点的元素不是当前卡牌或其子元素，说明被遮挡
    if (elementAtPoint && !card.contains(elementAtPoint)) {
      coveredCount++;
    }
  });

  // 超过一半采样点被遮挡，禁用hover
  card.style.pointerEvents = coveredCount >= checkPoints.length/2 ? 'none' : 'auto';
}

// 在卡牌位置变化、动画结束后调用检测
middleCard.addEventListener('transitionend', () => {
  checkCardIsCovered(document.querySelector('.card-top'));
  checkCardIsCovered(document.querySelector('.card-bottom'));
});

方法2：用Intersection Observer检测可见比例 #

如果卡牌是被容器裁剪或大面积遮挡，可以用这个API检测元素的可见占比，低于阈值时禁用hover：

const visibilityObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 可见比例低于80%时禁用hover
    entry.target.style.pointerEvents = entry.intersectionRatio < 0.8 ? 'none' : 'auto';
  });
}, { threshold: 0.8 }); // 设置检测的可见比例阈值

// 给需要检测的卡牌添加监听
document.querySelectorAll('.card').forEach(card => {
  visibilityObserver.observe(card);
});

总结 #

优先用方案一，完全贴合你的已知遮挡场景，实现成本最低。如果需要应对动态变化的遮挡情况，再考虑方案二的两种检测方法。

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