如何用CSS实现卡片置灰并叠加“施工中”状态标识？

核心思路 #

给未完成的卡片添加专属类，通过CSS降低卡片透明度，同时在卡片内部叠加全屏的“施工中”覆盖层，最后用JS阻止未激活卡片的跳转行为。

HTML结构示例 #

<!-- 已完成卡片 -->
<div class="card active">
  <a href="/completed-page">
    <div class="card-content">
      <h3>已完成内容</h3>
      <p>这是已经开发完成的内容卡片</p>
    </div>
  </a>
</div>

<!-- 未完成卡片 -->
<div class="card inactive">
  <a href="/unfinished-page">
    <div class="card-content">
      <h3>待完成内容</h3>
      <p>这是正在开发中的内容卡片</p>
    </div>
  </a>
  <!-- 施工中覆盖层 -->
  <div class="under-construction">施工中</div>
</div>

CSS样式实现 #

/* 基础卡片样式 */
.card {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px;
  cursor: pointer;
}

.card-content {
  padding: 20px;
}

/* 未激活卡片样式 */
.card.inactive {
  opacity: 0.5; /* 降低透明度 */
}

/* 施工中覆盖层样式 */
.under-construction {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #ff6b35;
  z-index: 10;
}

JS阻止跳转逻辑 #

// 给所有未激活卡片的链接添加阻止跳转事件
document.querySelectorAll('.card.inactive a').forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    // 可选：添加提示弹窗
    alert('该内容正在制作中，敬请期待！');
  });
});

额外优化点 #

• 若不需要弹窗提示，可给未激活卡片添加pointer-events: none，但会同时禁用覆盖层的交互，按需选择
• 给施工中标识添加动画增强视觉提示：

.under-construction {
  /* 保留原有样式 */
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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