ホバーで前後も大きくなるリスト
ホバーCSSのみリスト
- List Item
- List Item
- List Item
- List Item
- List Item
- List Item
ホバーすると前後の項目も少し大きくなるリストです
実装のポイント
ホバーした後続の要素は次兄弟結合子の+を使えば指定できますが、前の要素は:has()擬似クラスを使って指定できます。また前後のtransition-durationは少し遅くして引っ張られるような動きを表現しています。
コード例
HTML
<ul class="sampleList">
<li class="sampleItem">List Item</li>
<li class="sampleItem">List Item</li>
<li class="sampleItem">List Item</li>
<li class="sampleItem">List Item</li>
<li class="sampleItem">List Item</li>
<li class="sampleItem">List Item</li>
</ul>
CSS
.sampleItem {
transform-origin: 0 50%;
transition: scale 0.4s var(--ease-out-quart);
}
@media (any-hover: hover) {
.sampleItem:hover {
scale: 1.35;
/* ホバーしている次の要素 */
& + .sampleItem {
scale: 1.15;
transition-duration: 0.52s;
}
}
/* ホバーしている前の要素 */
.sampleItem:has(+ .sampleItem:hover) {
scale: 1.15;
transition-duration: 0.52s;
}
}
