#书摘 #css #前端
《CSS 选择器世界》:hover伪类与悬停交互开发
:hover 是各大浏览器最早支持的伪类之一，最早只能用在`<a>`元素上，其设计的初衷是改变链接元素的颜色：


a { color: blue; }
a:hover { color: darkblue; }​​


由于 :hover 实现浮层元素的显示与隐藏效果非常方便，于是当时出现了很怪异的现象：`<a>`元素满天飞，甚至`<a>`元素里面嵌套`<div>`元素以实现悬停交互效果，完全不符合HTML元素原本语义。例如：


<a href="javascript:void(0)">

菜单

<div class="list">列表</div>
<a>

list {
display: none;
position:absolute;
}

a:hover .list {
display: block;
}​​


CSS所有新特性的出现都源自用户需求和开发需求。同样，当意识到仅`<a>`元素支持:hover伪类非常影响开发效率之后，浏览器迅速跟进升级。目前，所有主流浏览器中，:hover伪类已经可以在任意HTML元素中使用了，其中包括自定义元素：


x-element:hover {}​​


需要注意的有如下几点，
- 如果是移动端开发，强烈建议不要使用:hover伪类实现交互效果，因为对于手机和iPad这类移动设备，常见的交互操作都通过触屏，而不是鼠标。虽然在这些设备上，:hover也能触发，但消失并不敏捷，体验反而不佳。
- 对于带有交互的行为，一定不能只使用:hover伪类，而需要额外的处理，可以通过增加:focus伪类来优化体验
- 但对于本身就带有链接或按钮的浮层元素，使用:focus伪类是不可行的，因为虽然可以触发浮层的显示，但是浮层内部的链接和按钮无法被点击，这是由于通过键盘切换焦点元素时浮层会因失焦而迅速隐藏。不过这是有其他解决方法的，那就是使用整体焦点伪类 :focus-within

https://memo.cosine.ren/m/329