第七章 用户行为伪类

一.用户行为伪类

:hover :focus :active

1.hover用于鼠标经过，所以用于pc端。

 1.1.需要注意，hover显示出来的内容的交互能力很差,使用tab无法出发hover,建议一起加上:focus。而且如果，在hover显示出来的内容中，有比如按钮，等其他有hover特效的元素，那在移动的过程中，前者的hover失效会导致，子元素的hover永远不可能生效。除非两个元素紧密的贴合，或者用transition延迟父元素的显示，鼠标快速移动到子元素的位置

2.active

active可以用于任何元素，当然hover也是，鼠标按下触发，抬起则停止。并且要清楚的是，键盘不会触发active。不过这个伪类在IE和移动端safari上有缺陷

IE下，active无法冒泡，只能作用在上层元素上
IE下，对html和body元素通过active修改背景颜色后，无法改回来
Safari下，:active会失效

3.focus

 3.1只能用于特定的元素:

元素类型
非disabled的表单元素
包含href的a元素
area元素
summary元素

 3.2那如何让普通元素也用上:focus呢？

（1）给普通元素加上contenteditable属性

（2）给普通元素设置tabindex=“number”，当number为负数也可以，并且不会被键盘所访问

 3.3需要注意的事情是，一个页面最多只能拥有一个焦点元素。也就是意味着，如果渴望通过:focus实现三级菜单其实不太显示，因为再点击下一个菜单的时候，一级菜单失去焦点，整个菜单不显示。并且再Safari上，元素的失去焦点，需要点击另一个可以获得焦点的元素来转移焦点。所以可以采取把html元素设置tabindex="-1"

4.最佳实践

 不要用div和span模拟表单,而是选用label+原生表单不可见的方式,并且用.focus提高键盘的可访问性

<input id="checkbox" type="checkbox">
<label class="checkbox" for="checkbox">提交</label>

<style>
  [type="checkbox"]{
    position:absolute;
    clip:rect(0,0,0,0)
  }
  .checkbox{
    border:1px solid gray;
  }
  :focus + .checkbox{
    border-color:skyblue;
  }
</style>

5.focus-within

内部元素的聚焦也会让父组件的:focus-within生效

6.focus-visible

往往我们希望鼠标点击造成的focus不要有焦点轮廓，键盘访问造成的focus有焦点轮廓。有部分的元素并不会按照这种预期。1.设置了背景的button；2.summary元素和3.设置了tabindex的元素（以Chrome为例）

此时就可以引入:focus-visible，在chrome中，这个伪类表示键盘访问的情况，也就是鼠标点击的时候可以这样写:focus:not(:focus-visible){...code...}