Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1132" role="group" aria-label="CSSコードの構文解説"><div class="tbx-1132__head"><b>style.css</b><small>HOVER TOKENS</small></div><code><span tabindex="0" class="tbx-1132__token" data-note="CSS SELECTOR">.card:hover</span> {<br> <span tabindex="0" class="tbx-1132__token tbx-1132__property" data-note="CSS PROPERTY">transform</span>: <span tabindex="0" class="tbx-1132__token tbx-1132__value" data-note="CSS VALUE">scale(1.05)</span>;<br> <span tabindex="0" class="tbx-1132__token tbx-1132__property" data-note="CSS PROPERTY">opacity</span>: <span tabindex="0" class="tbx-1132__token tbx-1132__value" data-note="CSS VALUE">1</span>;<br>}</code><div class="tbx-1132__foot">各トークンにマウスを合わせてください</div></div>CSS
.tbx-1132{width:min(286px,100%);min-height:189px;border-radius:9px;overflow:hidden;background:#202c40;color:#c9d7e5;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;box-shadow:0 8px 19px #162b3922}.tbx-1132__head{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#162338;border-bottom:1px solid #405369}.tbx-1132__head b{font-size:10px;font-weight:700;color:#d6e8f5}.tbx-1132__head small{font-size:8px;letter-spacing:.12em;color:#83b2ab}.tbx-1132 code{display:block;padding:17px 12px 14px;font:12px/2.1 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.tbx-1132__token{position:relative;cursor:help;border-radius:3px;color:#e0be85;outline-offset:2px;transition:background .25s,color .25s}.tbx-1132__property{color:#87c6c3}.tbx-1132__value{color:#eab08f}.tbx-1132__token:after{content:attr(data-note);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%,5px);white-space:nowrap;background:#f5e6c5;color:#264155;border-radius:3px;padding:3px 5px;font:bold 8px/1.2 system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:3}.tbx-1132__token:is(:hover,:focus-visible){background:#445974;color:#fff}.tbx-1132__token:is(:hover,:focus-visible):after{opacity:1;transform:translate(-50%,0)}.tbx-1132__foot{font:9px/1.2 system-ui,sans-serif;color:#91a6b9;padding:0 12px 12px}.tbx-1132__token:focus-visible{outline:2px solid #f5e6c5}@media(prefers-reduced-motion:reduce){.tbx-1132 *,.tbx-1132__token:after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Documentation / Learning
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報は通常時から見える状態にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。