如何实现悬停元素消失并显示可点击元素？解决点击失效问题

问题描述 #

我有一个类为dog-letter的元素，内部包含dog和letter两个子元素，已实现该元素悬停后消失的效果。需要显示的目标元素是类为dog-nose的黑色圆形元素，但该元素显示后无法稳定点击：添加z-index:1后原元素表现稳定，但仍无法每次都点击到dog-nose，轻微移动光标就会失去点击能力。

问题根源 #

• dog-letter执行动画后只是透明度变为0，元素本身的物理占位依然存在，会持续遮挡下方的dog-nose，导致鼠标实际仍停留在dog-letter上，无法触发dog-nose的点击事件。
• 依赖相邻兄弟选择器.dog-letter:hover + .dog-nose控制dog-nose显示，一旦dog-letter动画变形/位移，光标离开其原区域时，hover状态消失，dog-nose的交互状态也会失效。

修复方案 #

1. 给动画结束后的dog-letter添加pointer-events: none，让它不再拦截鼠标事件，允许光标穿透到下方的dog-nose。
2. 调整dog-nose的显示逻辑，基于父元素的hover状态来控制，避免因dog-letter的hover消失导致元素隐藏。
3. 确保dog-nose的层级足够高，避免被其他元素遮挡。

修改后的代码 #

CSS 代码

.dog-letter-box {
  border-top: 1px solid #555;
  border-bottom: 2px solid #000000;
  height: 250px;
  width: 100%;
  background: #FEEEEB;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.dog-letter {
  z-index:1;
  margin: 6% auto;
  width: 50px;
  height: 150px;
  background: #00EFFE;
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: 50% 40%; 
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
}
/* 动画结束后禁止鼠标事件，让光标穿透到下方元素 */
.dog-letter.bounce:hover {
    animation-name: bounce-up;
    animation-timing-function: ease;
    pointer-events: none;
}
.dog {
  width: 50px;
  height: 50px;
  clip-path: circle(40%);
  background: #FFB6C1;
}
.letter {
  width: 50px;
  height: 100px;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  background: #FF46C1;
}
/* 改为父元素hover控制显示，避免dog-letter hover失效后元素隐藏 */
.dog-letter-box:hover .dog-nose {
  animation-duration: 0.75s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-name: show-up;
  animation-timing-function: ease;
}
.dog-nose {
  margin:10px auto;
  width: 70px;
  height: 70px;
  background: #AFE1AF;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  opacity: 0;
  /* 确保层级高于dog-letter */
  z-index: 2;
}
@keyframes bounce-up {
  0%   { transform: translateY(0) scaleY(1) rotateY(0); opacity: 1; }
  100% { transform: translateY(-15px) scaleY(0.2) rotateY(540deg); opacity: 0; }
}
@keyframes show-up {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

HTML 代码

<div class="dog-letter-box">
  <div class="dog-letter bounce">
      <div class="dog">55</div>
      <div class="letter">66</div>
  </div>
  <a class="dog-nose" href='#'>
    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
      <circle cx="10" cy="10" r="10"/>
    </svg>
  </a>
</div>

关键修改说明 #

• pointer-events: none让动画后的dog-letter不再响应鼠标事件，光标可以直接作用于下方的dog-nose。
• 父容器hover触发dog-nose显示的逻辑，避免了dog-letter动画后hover状态丢失导致的元素隐藏问题。
• 给dog-nose设置更高的z-index，进一步确保它不会被其他元素遮挡。

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