悬停放大列表
悬停放大列表：列表项悬停时整体轻微放大并高亮，其余项缩小变淡——列表导航、歌单、文章列表都很常用。纯 CSS 用 :hover 配合 :has() 选择器即可实现“其它项让位”。
兼容性：:has() 在 Chrome 105+/Safari 15.4+ 支持；不支持的环境降级为“只放大当前项”即可。
- 当前项 scale(1.03) 放大；容器 :has(:hover) 时其余项缩小
- transition 统一 .3s，手感顺滑
- 用 :has(.item:hover) 而不是麻烦的 JS 兄弟选择
HTML
<style> .list { max-width: 420px; margin: 30px auto; list-style: none; padding: 0; transition: .3s; } .list .item { padding: 16px 20px; margin: 8px 0; border-radius: 10px; background: #f6f8fa; cursor: pointer; transition: transform .3s ease, opacity .3s ease, background .3s; } .list .item:hover { transform: scale(1.03); background: #e8f0fe; } .list:has(.item:hover) .item:not(:hover) { transform: scale(.97); opacity: .55; } </style> <ul class="list"> <li class="item">列表项 A —— 悬停我</li> <li class="item">列表项 B</li> <li class="item">列表项 C</li> <li class="item">列表项 D</li> </ul>
本节要点悬停放大列表用 :has() 让其余项“退让”；不支持的环境降级为单端放大。
