0x00

前几天在某网站看到一种列表设计：

1. 当鼠标不在任何列表项上悬停时，所有列表项以普通亮度显示
   

2. 当光标悬停于某一列表项时，该列表项高亮显示，并且其他列表项变暗。

不过该网站为了兼容某些老旧浏览器，采用了JS的方式实现。那么这样的列表能不能不用JS呢？

0x01

简单搞一下。

列表的html如下

css如下

目前为止，实现了需求1和需求2的前半句，那么后半句怎么实现？

0x02

CSS筛选器伪类:has，语法如下

其执行逻辑是，当同时满足selector1和selector2时，返回selector1的结果。

于是需求的最后一步CSS如下

完整代码：https://codepen.io/hawkeyes0/pen/yLdQJJV

另一个类似的手风琴效果：https://codepen.io/hawkeyes0/pen/BagGzYN