Has Selector Hover

DEMO

<div class="demo-stage hsh-stage">
  <div class="hsh-list">
    <a class="hsh-item" href="#" onclick="return false;"><span class="hsh-idx">01</span><span class="hsh-name">DISCOVER</span></a>
    <a class="hsh-item" href="#" onclick="return false;"><span class="hsh-idx">02</span><span class="hsh-name">DESIGN</span></a>
    <a class="hsh-item" href="#" onclick="return false;"><span class="hsh-idx">03</span><span class="hsh-name">DEVELOP</span></a>
    <a class="hsh-item" href="#" onclick="return false;"><span class="hsh-idx">04</span><span class="hsh-name">DEPLOY</span></a>
  </div>
</div>

.hsh-stage { display:flex; align-items:center; justify-content:center; padding:2.5rem; background:#0F0F12; min-height:280px; }
.hsh-list { display:flex; flex-direction:column; width:100%; max-width:420px; }
.hsh-item {
  display:flex; align-items:baseline; gap:1.2rem;
  padding:1.1rem .6rem; border-bottom:1px solid rgba(255,255,255,.08);
  text-decoration:none; color:#EDEDED;
  transition: opacity .35s ease, filter .35s ease, transform .35s cubic-bezier(.23,1,.32,1), color .35s ease;
}
.hsh-idx { font-family:'JetBrains Mono',monospace; font-size:.7rem; color:#E91B89; }
.hsh-name { font-family:'Oswald',sans-serif; font-size:1.25rem; letter-spacing:.14em; }
.hsh-list:has(.hsh-item:hover) .hsh-item:not(:hover),
.hsh-list:has(.hsh-item:focus-visible) .hsh-item:not(:focus-visible) {
  opacity:.28; filter:blur(1.5px); transform:scale(.97);
}
.hsh-item:hover, .hsh-item:focus-visible { transform:translateX(10px); color:#fff; }
.hsh-item:focus-visible { outline:2px solid #E91B89; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) {
  .hsh-item { transition-duration:.01ms; }
  .hsh-list:has(.hsh-item:hover) .hsh-item:not(:hover) { filter:none; transform:none; }
}

AI PROMPT

:has() を使って、リストの1項目にホバーしたとき「ホバーしていない他の項目だけ」を沈ませるフォーカス演出を作って。書き方は .list:has(.item:hover) .item:not(:hover) { opacity: .28; filter: blur(1.5px); transform: scale(.97) } の1ルール。:has() は「その条件を満たす子孫を持つ親」を選ぶセレクタなので、これで初めて「子の状態で親（と他の子）のスタイルを変える」ことがCSSだけで書ける。ホバー中の項目自体には transform: translateX(10px) など前に出る変化を与えるとコントラストが立つ。キーボード操作でも同じ体験にするため、:hover と :focus-visible の両方の組を書くこと。トランジションは opacity・filter・transform に掛け、duration は 300〜400ms 程度が自然。注意: filter: blur() は下のレイヤーを合成し直すため、項目数が多い（数十以上の）リストでは blur を外して opacity と transform だけにする。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。