聚焦淡化其他卡片

悬停在一张卡片上时它会微微抬起，其他卡片变淡变柔，让注意力落在一个选项上。

CSS
卡片
悬停
收录于 2026-10-29

AI 提示词

用纯 CSS 制作悬停一张卡片时其他卡片变淡的卡片组。三张卡片用 grid 排列。在组上使用 :has()：.group:has(.card:hover) .card:not(:hover) 设为 opacity 0.4、scale(0.97)、1px 模糊，被悬停的卡片 translateY(-4px) 并加深边框。对 :focus-within 做同样处理，让键盘聚焦表现一致。opacity、transform 和 filter 过渡 260ms，缓动 cubic-bezier(0.16, 1, 0.3, 1)。每张卡片是链接或按钮，可以被聚焦。在 prefers-reduced-motion 下保留变淡，去掉缩放、抬起和模糊。卡片文字为“入门版”“工作室版”“团队版”。

源代码

Demo.tsx

'use client'

import s from './demo.module.css'

export default function FocusDim({ labels }: { labels: Record<string, string> }) {
  const plans = [
    { name: labels.a, price: 0 },
    { name: labels.b, price: 12 },
    { name: labels.c, price: 29 },
  ]

  return (
    <div className={s.group}>
      {plans.map((p) => (
        <a key={p.name} href="#" className={s.card} onClick={(e) => e.preventDefault()}>
          <span className={s.name}>{p.name}</span>
          <span className={s.price}>${p.price}</span>
          <span className={s.per}>{labels.price}</span>
        </a>
      ))}
    </div>
  )
}

demo.module.css

.group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(330px, 100%);
}

.card {
  display: grid;
  gap: 4px;
  padding: 14px 12px;
  border: 1px solid var(--stage-rule);
  border-radius: 12px;
  background: var(--stage-surface);
  color: var(--stage-ink);
  text-decoration: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), filter 260ms var(--ease-out), border-color 260ms;
}

.card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.group:has(.card:hover) .card:not(:hover),
.group:has(.card:focus-visible) .card:not(:focus-visible) {
  opacity: 0.4;
  transform: scale(0.97);
  filter: blur(1px);
}

.card:hover,
.card:focus-visible { transform: translateY(-4px); border-color: var(--stage-accent); }

.name { font: 500 var(--text-xs) / 1.2 var(--font-body); color: var(--stage-muted); }
.price { font: 700 var(--text-2xl) / 1 var(--font-display); }
.per { font: 500 0.625rem / 1 var(--font-mono); color: var(--stage-muted); text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .card:focus-visible,
  .group:has(.card:hover) .card:not(:hover),
  .group:has(.card:focus-visible) .card:not(:focus-visible) { transform: none; filter: none; }
}