:hover css伪类运用——转载自(隔叶黄莺 Unmi Blog)作为收藏
原来做过一个在 html 表格中,当鼠标悬停在某行时,该行出行操作按钮,其他行的操作按钮隐藏。那时候的实现思想是当 onmouseover 在某行时,循环所有行,全隐藏掉按钮,再显示该行的。偶尔还得用下 onmouseourt 事件,现在想来这种实现会很影响页面效率的。
前几日看 WordPress 的后台列表,对相应记录的操作也使用了该功能,鼠标停在哪一行就只出现该行的可操作按钮,曾以为是用 js 实现的,看到要隐现的元素是 <div class="row-actions">edit|trash...</div>,还在 js 文件里搜索过 row-actions 字符串。忙了一会儿才把目光转移到了 css 中找实现,在 wp-admin/css/wp-admin.css 中找到像下面的样式:
1
2
3
4
5
6
7
8
|
.row-actions { padding : 2px 0 0 ; visibility : hidden ; } tr:hover .row-actions, div.comment-item:hover .row-actions { visibility : visible ; } |
原来它是用 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
1
2
3
4
|
a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ |
像 link、visited 和 active 好像不能用来作较好的动态效果,而 hover 就不一样了,它本身就暗含了 onmouseover/onmouseout 这样一种行为,就是鼠标悬停时应用某个样式,而鼠标离开时不应用某个样式。通过这一伪类便无需用 js 的事件来判断切换 css 了。
下面来看个对 hover 伪类的完整的应用,如下 html 代码:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < title >样式实现隐现</ title > </ head > < style > .row-actions { visibility: hidden; padding: 2px 0 0; } tr:hover .row-actions{ visibility: visible; } tr{ vertical-align:top; } </ style > < table width = "300" border = 1 height = "20" > < tr > < th >Name</ th >< th >Blog</ th > </ tr > < tr > < td >Unmi < div class = "row-actions" > < span >< a href = ‘###‘ >修改</ a ></ span >| < span >< a href = ‘###‘ >删除</ a ></ span ></ div > </ td > < td >< a href = ‘http://unmi.cc‘ >http://Unmi.Cc</ a ></ td > </ tr > < tr > < td >Unmi.Cc < div class = "row-actions" > < span >< a href = ‘###‘ >修改</ a ></ span >| < span >< a href = ‘###‘ >删除</ a ></ span ></ div > </ td > < td >< a href = ‘http://unmi.cc‘ >Unmi.Cc</ a ></ td > </ tr > </ table > </ body > </ 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 ... 这段声明都行。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。