首页 > 代码库 > :hover css伪类运用——转载自（隔叶黄莺 Unmi Blog）作为收藏

:hover css伪类运用——转载自（隔叶黄莺 Unmi Blog）作为收藏

2024-11-21 01:06:02   202人阅读

本文原始链接 http://unmi.cc/css-a-hover-js-over-out/, 来自 隔叶黄莺 Unmi Blog

 

 

原来做过一个在 html 表格中，当鼠标悬停在某行时，该行出行操作按钮，其他行的操作按钮隐藏。那时候的实现思想是当 onm ouseover 在某行时，循环所有行，全隐藏掉按钮，再显示该行的。偶尔还得用下 onm ouseourt 事件，现在想来这种实现会很影响页面效率的。

前几日看 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 就不一样了，它本身就暗含了 onm ouseover/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 ... 这段声明都行。

:hover css伪类运用——转载自（隔叶黄莺 Unmi Blog）作为收藏


联系
我们