如何用纯CSS修复图片悬停覆盖层链接不可点击及抖动问题？

问题根源 #

1. 你用fixed定位的<b>元素触发悬停，但fixed是基于视口定位，导致它的范围和.item容器不匹配，悬停状态判断混乱；
2. 覆盖层显示后遮挡了触发悬停的<b>元素，鼠标被判定离开<b>，触发状态回退，形成抖动循环；
3. 初始状态下覆盖层的pointer-events: all会干扰底层元素的悬停判断。

纯CSS解决方案 #

把悬停触发源从<b>元素转移到.item容器，调整<b>元素的定位方式，并优化覆盖层的指针事件属性：

1. 用.item容器作为悬停触发主体，确保整个卡片范围都能触发效果；
2. 将<b>元素的fixed定位改为absolute，依托.item的relative定位，让它完全覆盖在卡片内部；
3. 给未显示的覆盖层设置pointer-events: none，避免干扰悬停触发；覆盖层显示时恢复pointer-events: all，允许点击链接；
4. 移除不必要的z-index设置，依靠元素自然层级避免冲突。

修改后的代码 #

CSS

.grid {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: sans-serif;
}

body {
  font-family: Montserrat, sans-serif;
  margin: 0;
  padding: 3rem;
  background-color: rgb(3, 4, 39);
  color: white;
}

.linkhere.fill-div {
  width: 100%;
  height: 100%;
}

.item {
  position: relative;
  width: 475px;
  max-width: 900px;
  background-color: rgba(3, 4, 39, 0.6);
  overflow-y: hidden;
  margin: 10px;
  
  /* 改为.item容器触发悬停 */
  &:hover,
  &:focus-within {
    .item__overlay {
      transform: translate(0, 0);
      h3 {
        transform: translate(0, 0);
      }
      .item__body {
        opacity: 1;
      }
    }
  }

  h3 {
    margin: 0;
    display: block;
    background-color: rgba(3, 4, 39, 0.6);
    padding: 1rem;
    transform: translate3d(0, -100%, 0);
    transition: transform .4s;
  }

  b {
    /* 改为absolute定位，匹配.item容器范围 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
  }
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.item__overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  transition: transform .4s;
  color: white;
  background-color: rgba(3, 4, 39, 0.6);
  transform: translate(0, 100%);
  /* 未显示时禁用指针事件，避免干扰悬停 */
  pointer-events: none;
  
  /* 显示时恢复指针事件，允许点击链接 */
  .item:hover &,
  .item:focus-within & {
    pointer-events: all;
  }
}

.item__body {
  flex-grow: 1;
  padding: 1rem;
  background: rgba(3, 4, 39, 0.6);
  
  p {
    margin: 0;
    position: relative;
  }
  
  a {
    color: green;
  }
}

HTML

<div class="grid">
  <h1>Team Useful Links <a href="https://www.google.com"> additional link</a></h1>
</div>


<div class="grid">
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>WSS Overall Links <a href="https://www.google.com"> additional link</a></h3>
      <div class="item__body">
        <p>tesxt</p>
        <p><a href="https://www.google.com">mytesthere</a></p>
        <p><a href="https://www.google.com">mytesthere</a></p>
        <p><a href="https://www.google.com">mytesthere</a></p>
      </div>
    </div>
  </div>
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>Person Name 2</h3>
      <div class="item__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </p>
      </div>
    </div>
  </div>
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>Person with a really long name</h3>
      <div class="item__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
      </div>
    </div>
  </div>
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>Person with an even longer name that wraps onto multiple lines</h3>
      <div class="item__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </p>
      </div>
    </div>
  </div>
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>Image Hover Title 1</h3>
      <div class="item__body">
        <p>Sample Text Here</p>
      </div>
    </div>
  </div>
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>Person Name 2</h3>
      <div class="item__body">
        <p>sample text</p>
      </div>
    </div>
  </div>
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>Person with a really long name</h3>
      <div class="item__body">
        <p>sample text</p>
      </div>
    </div>
  </div>
  <div class="item">
    <b></b>
    <img src="ship1.jfif" alt=''>
    <div class="item__overlay">
      <h3>Person with an even longer name that wraps onto multiple lines</h3>
      <div class="item__body">
        <p>sample text</p>
      </div>
    </div>
  </div>
</div>

核心修改效果 #

• 悬停触发范围覆盖整个卡片，不会因为覆盖层显示而丢失状态，彻底解决抖动问题；
• 覆盖层仅在显示时允许指针交互，既不干扰悬停触发，又能正常点击链接；
• 元素层级逻辑清晰，无需依赖z-index强制调整层级。

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