最近写网页前端的过程中，发现会经常用到伪类的使用，如:link,:visited,:hover,:active,:disabled等。其中:link通常表示未点击链接的状态，:visited则为已点击的状态，:hover为鼠标悬停，：active为鼠标按下到放开时链接或按钮的状态，:disabled常用于表示元素不可用时的状态。其中数鼠标悬停交互（hover/onmouseover）的方式的运用最为多样化，当css不能满足悬停事件的时候常常借助js来实现。在开发人员和设计师的脑洞下鼠标悬停事件可以有多种多样的表现形式。从交互作用上总结起来大致有以下几类：1.最常见的是用在可点击元素或者网页链接上，常见为网址鼠标悬停显示下划线、按钮/图标悬停改变颜色等状态，若是material design风格会常将鼠标选中的卡片加重阴影，使卡片有上浮的感觉。 有些图标的鼠标悬浮会出现tips来提示按钮的含义或者作用。将用户的鼠标移动行为即时反馈，以提示人们选中了可点击的元素或者超链接，可以进行点击了。2.用于导航中显示二级菜单/分类详情，其中选中的一级菜单链接可以直接点击显示，也可选中二级菜单进入更详细的分类页面。 需要注意的是，当导航中的每个选项都有二级菜单并且为鼠标悬停显示的时候，二级菜单的弹出有一定的时间延迟会好一些，原因是如果鼠标悬停立刻显示的话，当鼠标沿着导航栏划过的时候二级菜单的显示会使人眼花缭乱，增加用户烦躁感；而若延迟出现二级菜单则可以在用户在某选项短暂停留后（用户对此选项可能有兴趣，想点击）再出现，可在相关选项聚焦其注意力。3.显示隐藏的按钮/图标。 当某些按钮：（1）不是那么重要、（2）不希望按钮太吸引用户视线、（3）每个同类图片或模块都有相同操作的按钮时，则可在用户对某板块感兴趣而将鼠标移入的时候显示该按钮。例如facebook里的广告，关闭按钮只在鼠标悬停在广告内容上才出现，相比于没有关闭按钮的贴片广告而言增加了用户的控制感，相比于关闭按钮默认一直显示的贴片广告而言可使用户在关闭前增强用户对广告的关注度，有益于广告的转化率（若关闭按钮一直显示则用户的注意力大部分会在关闭按钮上急着想关闭而容易忽视广告本身的内容。）4.通过隐藏或弱化其它元素或者突出选中元素来聚焦用户的视线。可以在当前页面内更好地展示产品。5.通过图片遮罩或者在选中的元素周围弹出新浮层来显示相关元素的额外/更详细的信息。使用户不需要跳转页面就可以获得更多的相关信息。6.鼠标悬停自动播放gif，在这里鼠标悬停是一个时机，悬停在gif图片上图片才变成动图播放，而不是一开始就不停地播放动图，使人眼花缭乱（这和视频很少设置为自动播放的道理是相同的）。7.显示可切换选项，如在视频中可即时切换声音状态或者画质状态。以上只是整理了鼠标悬停事件的几种用法，这些用法有优点也有缺点，网页元素应该根据自身特点选择是否采用鼠标悬停触发事件。欢迎批评指正。（手动笑脸）css问题a:hover 事件可以用jQuery的hover代替。
使用jq替代举例首先要引入jq文件，然后 $('XXX').hover(function(){})
:hover 伪类是在鼠标移到元素上时向此元素添加特殊的样式。
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。
a:hobver在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
定义和用法
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF}/* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！
注释：Pseudo-class（伪类）的名称对大小写不敏感。
注释：伪类可与 CSS 类配合使用：
a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
如果上面这个例子中的链接已访问过，那么它会显示为红色。
PS:IE6中使用hover会有兼容性问题，推荐配合javascript使用
