hover、focus、active、link、visited详解

一、hover、focus、active、link、visited详解

CSS 又名层叠样式表，是一种伪类用于向某些选择的容器添加特殊的效果，所谓层叠，就是后面的样式会覆盖前面的样式，所以不同的排列顺序可能会有不同的显示效果。下面介绍几个关于连接按钮效果的关键样式属性：

1. link：控制未访问时的显示效果；
2. hover：鼠标悬停和划过时的显示效果；
3. visited：访问过后的显示效果；
4. active：控制按钮被点击时的显示效果。当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；
   5.focus：获得聚焦对象的元素，并设置聚焦时的显示效果。当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用。

• link 与 visited 在样式文件中的顺序任意，相互之间没有影响。 而focus， hover，active这这三个的顺序有要求，乱放后可能会出现显示的效果与预想的不同。
  正常顺序为:focus – :hover – :active
• link代表为访问链接的样式，所以只要你是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。
• visited代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式
• focus 代表的是获取焦点时的样式，有人说啥是获取焦点时的样式，可以通过tab键来查看，一旦链接获取了焦点，则它的样式就是你设置的focus样式
• hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，而将其放在focus前，则当鼠标滑过时显示的时focus的属性，因为其特性被覆盖了。
• active 代表元素被激活时的样式，也就是元素被按下时的样式，如果:active选择器与 :focus , :hover 调换位置，则显示的效果也会不同，因为排在后面的样式，会覆盖前面的样式

二、hover

1、变色：

.btn:hover { background: #00b5e5; }

2、高光：

.btn:hover { filter: brightness(1.1); }

注：打高光比找变色简单，效果十分近似，但在很特殊的情况下，会影响到子节点带 filter：invert() 的元素，会使反色受到影响。

3、透明度：

.btn { opacity: .8; }
.btn:hover {opacity: 1; }