:hover
定义和用法
- :hover，鼠标移到链接上时。最常见的例子是将鼠标指针移动到超链接的边界内
- :hover，是一个伪类，它适用于处于悬停状态的元素。
- :hover，可用于所有元素，不仅是链接。
- :link选择器设置了未访问过的页面链接样式。:visited选择器设置访问过的页面链接的样式。:active选择器设置当你点击链接时的样式。
- 为了产生预期的效果，在 CSS 定义中，:hover必须位于:link和:visited之后！
语法:
E:hover
设置元素在其鼠标悬停时的样式。
- 如果需要给超链接定义：访问前，鼠标悬停，当前被点击，已访问。这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现
- 超链接的4种状态，需要有特定的书写顺序才能生效。超链接状态顺序:：:link、:visited、:hover、:active。注意，:hover必须位于:link和:visited之后，:active必须位于:hover之后
注意:在触摸屏上:hover有问题，基本不可用。不同的浏览器上:hover伪类表现不同。可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素。触摸屏非常普遍，所以网页开发人员不要让任何内容只能通过悬停才能展示出来，不然这些内容对于触摸屏使用者来说是很难或者说不可能看到。
浏览器支持
例子
:link:hover { outline: dotted red; }.foo:hover { background: gold; }
下拉按钮
使用:hover伪类可以创建复杂的层叠机制。一个常见用途，比如，创建一个纯CSS的下拉按钮（不使用JavaScript）。本质是创建如下的CSS：
div.menu-bar ul ul {display: none;}div.menu-bar li:hover > ul {display: block;}
HTML内容如下:
