用 CSS 的伪类 hover 轻易实现 js 的 mouseover/mouseout 功能
原来做过一个在 html 表格中，当鼠标悬停在某行时，该行出行操作按钮，其他行的操作按钮隐藏。那时候的实现思想是当 onmouseover 在某行时，循环所有行，全隐藏掉按钮，再显示该行的。偶尔还得用下 onmouseourt 事件，现在想来这种实现会很影响页面效率的。
前几日看 WordPress 的后台列表，对相应记录的操作也使用了该功能，鼠标停在哪一行就只出现该行的可操作按钮，曾以为是用 js 实现的，看到要隐现的元素是 <div class="row-actions">edit|trash...</div>，还在 js 文件里搜索过 row-actions 字符串。忙了一会儿才把目光转移到了 css 中找实现，在 wp-admin/css/wp-admin.css 中找到像下面的样式:
原来它是用 css 的 hover 伪类来实现了平常想用 js 来实现的功能。从前只知道像 hover、link、visited 和 active 这样的伪类只能应用到 a 标签，即要写成 a:hover、a:link、a:visited、a:active。其实这四个玩意是可以应用到其他的 html 标签、指定给其他定义的 class 上。
有关于 CSS 伪类可参考：http://www.w3school.com.cn/css/css_pseudo_classes.asp
像 link、visited 和 active 好像不能用来作较好的动态效果，而 hover 就不一样了，它本身就暗含了 onmouseover/onmouseout 这样一种行为，就是鼠标悬停时应用某个样式，而鼠标离开时不应用某个样式。通过这一伪类便无需用 js 的事件来判断切换 css 了。
下面来看个对 hover 伪类的完整的应用，如下 html 代码：
上面代码执行的效果就是，鼠标停在表格中的哪一行，哪行才会显示出操作按钮来。注意要隐现的操作按钮是放在 class="row-actions" 中的，留意 tr:hover 的控制。
最后强调一下，如果把第一行： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这个 DTD 声明去掉，也不会有鼠标悬停哪行才显示 <div class="row-action"> 中内容的效果，其实是 IE 的要求，甚至只给个声明，如 <!DOCTYPE>，IE 就满足，可以出效果来，在其他浏览器中不用 <!DOCTYPE ... 这段声明都行。 永久链接 https://yanbin.blog/css-a-hover-js-over-out/, 来自 隔叶黄莺 Yanbin's Blog
[版权声明]
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。
前几日看 WordPress 的后台列表，对相应记录的操作也使用了该功能，鼠标停在哪一行就只出现该行的可操作按钮，曾以为是用 js 实现的，看到要隐现的元素是 <div class="row-actions">edit|trash...</div>，还在 js 文件里搜索过 row-actions 字符串。忙了一会儿才把目光转移到了 css 中找实现，在 wp-admin/css/wp-admin.css 中找到像下面的样式:
1.row-actions {
2 padding:2px 0 0;
3 visibility:hidden;
4}
5
6tr:hover .row-actions, div.comment-item:hover .row-actions {
7 visibility:visible;
8}原来它是用 css 的 hover 伪类来实现了平常想用 js 来实现的功能。从前只知道像 hover、link、visited 和 active 这样的伪类只能应用到 a 标签，即要写成 a:hover、a:link、a:visited、a:active。其实这四个玩意是可以应用到其他的 html 标签、指定给其他定义的 class 上。
有关于 CSS 伪类可参考：http://www.w3school.com.cn/css/css_pseudo_classes.asp
1a:link {color: #FF0000} /* 未访问的链接 */
2a:visited {color: #00FF00} /* 已访问的链接 */
3a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
4a:active {color: #0000FF} /* 选定的链接 */像 link、visited 和 active 好像不能用来作较好的动态效果，而 hover 就不一样了，它本身就暗含了 onmouseover/onmouseout 这样一种行为，就是鼠标悬停时应用某个样式，而鼠标离开时不应用某个样式。通过这一伪类便无需用 js 的事件来判断切换 css 了。
下面来看个对 hover 伪类的完整的应用，如下 html 代码：
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3 <head>
4 <title>样式实现隐现</title>
5 </head>
6<style>
7 .row-actions {
8 visibility: hidden;
9 padding: 2px 0 0;
10 }
11
12 tr:hover .row-actions{
13 visibility: visible;
14 }
15
16 tr{
17 vertical-align:top;
18 }
19</style>
20
21<table width="300" border=1 height="20">
22 <tr>
23 <th>Name</th><th>Blog</th>
24 </tr>
25 <tr>
26 <td>Unmi
27 <div class="row-actions">
28 <span><a href='###'>修改</a></span>|
29 <span><a href='###'>删除</a></span></div>
30 </td>
31 <td><a href='http://unmi.cc'>http://Unmi.Cc</a></td>
32 </tr>
33 <tr>
34 <td>Unmi.Cc
35 <div class="row-actions">
36 <span><a href='###'>修改</a></span>|
37 <span><a href='###'>删除</a></span></div>
38 </td>
39 <td><a href='http://unmi.cc'>Unmi.Cc</a></td>
40 </tr>
41 </table>
42 </body>
43</html>上面代码执行的效果就是，鼠标停在表格中的哪一行，哪行才会显示出操作按钮来。注意要隐现的操作按钮是放在 class="row-actions" 中的，留意 tr:hover 的控制。
最后强调一下，如果把第一行： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 这个 DTD 声明去掉，也不会有鼠标悬停哪行才显示 <div class="row-action"> 中内容的效果，其实是 IE 的要求，甚至只给个声明，如 <!DOCTYPE>，IE 就满足，可以出效果来，在其他浏览器中不用 <!DOCTYPE ... 这段声明都行。 永久链接 https://yanbin.blog/css-a-hover-js-over-out/, 来自 隔叶黄莺 Yanbin's Blog
[版权声明]
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 进行许可。