Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1262"><nav class="locations" aria-label="店舗案内"><span class="marker" aria-hidden="true">●</span><button type="button" class="place p1"><span>01</span> Central Studio <b>↗</b></button><button type="button" class="place p2"><span>02</span> Riverside Shop <b>↗</b></button><button type="button" class="place p3"><span>03</span> Parkside Office <b>↗</b></button></nav></div>CSS
.tbx-1262{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:218px;overflow:visible;padding:24px 18px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#243e43}
.tbx-1262 *,.tbx-1262 *::before,.tbx-1262 *::after{box-sizing:border-box}
.tbx-1262{background:#e9e1d7}
.tbx-1262 .locations{width:min(300px,100%);position:relative;display:grid;gap:3px;padding:12px 8px 12px 25px;background:#fcfbf7;box-shadow:0 6px 20px #6e5d4e19;--y:0px}
.tbx-1262 .marker{position:absolute;top:28px;left:8px;line-height:1;color:#c26d4c;font-size:11px;transform:translateY(var(--y));transition:transform .38s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tbx-1262 .place{border:0;background:transparent;cursor:pointer;color:#303b3e;text-align:left;display:flex;align-items:center;gap:10px;font-size:14px;padding:8px 5px;min-height:38px;transition:color .3s,background .3s}
.tbx-1262 .place span{font-size:9px;color:#ad9383}
.tbx-1262 .place b{margin-left:auto;font-size:16px;font-weight:400;opacity:.3;transition:opacity .3s}
.tbx-1262 .place:is(:hover,:focus-visible){color:#9d4d35;background:#f3ebe3}
.tbx-1262 .place:is(:hover,:focus-visible) b{opacity:1}
.tbx-1262 .locations:has(.p1:hover),.tbx-1262 .locations:has(.p1:focus-visible){--y:0px}
.tbx-1262 .locations:has(.p2:hover),.tbx-1262 .locations:has(.p2:focus-visible){--y:41px}
.tbx-1262 .locations:has(.p3:hover),.tbx-1262 .locations:has(.p3:focus-visible){--y:82px}
@media (prefers-reduced-motion: reduce) {.tbx-1262 *, .tbx-1262 *::before, .tbx-1262 *::after { transition-duration:0.01ms !important; animation-duration:0.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Access, Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーが利用できない場合があります。リンク・入力操作をホバー専用にしないでください。
Browser：Chrome・Firefox・Safari・Edgeの現行版を推奨。:has()利用素材は現行版で確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。