10.3 鼠标指针经过时整行变色提示的表格


近年来,Web 2.0的概念逐渐被广泛接受,其中很重要的一点是强调改善用户体验,例如上一节的例子中,把表格设置为交替背景色,可以使访问者在浏览表格时有更好的体验。

然而对于长时间审核大量数据和浏览表格的用户来说,即使是隔行变色的表格,长时间阅读这样的表格仍然会感到疲劳。而且对于数据壁很大的表格,特别容易看错行或者列。如果参考微软公司Excel软件的做法,我们就可以发现很多可以改进的地方。

例如,在一个行列都很多的表格中,如果能像在Excel中那样,随时以高亮的方式提示一个单元格对应的行号(或行的名称1)和列号(或列的名称),就会大大改进浏览者的体验了。

在本节的案例中先实现一个比较容易的效果,当鼠标指针经过表中的某一个单元格时,该单元格所在的行能够动态地变色,如图1所示,这样就会大大减少访问者看错行的可能性。这实现起来比横竖两个方向的变色要容易一些。

实例文件位于网页学习网CSS教程资源中的“第10章\02\pretty-2.htm”。


图1 鼠标指针经过时数据行的背景变色

一、搭建HTML结构

仍然以上一节中制作的表格为例,由于本案例的重点是JavaScript的编写,因此先对表格进行化简,把表格设置为最基本的HTML结构,这样便于理解JavaScript的作用原理。把表头的标记全部换为通用的<td>标记,HTML代码如下。lodidance.com

折叠展开XML/HTML 代码复制内容到剪贴板

  1. <table summary="book list">
  2. <caption>Book List</caption>
  3. <tr >
  4. <td >Title</td>
  5. <td>ID</td>
  6. <td>Contry</td>
  7. <td>Price</td>
  8. <td>Download</td>
  9. </tr>
  10. <tr >
  11. <td >Tom</td>
  12. <td>1213456</td>
  13. <td>Germany</td>
  14. <td>$3.12</td>
  15. <td>Download</td>
  16. </tr>
  17. <tr>
  18. <td >Chance</td>
  19. <td>1213457</td>
  20. <td>Germany</td>
  21. <td>$123.34</td>
  22. <td>Download</td>
  23. </tr>
  24. <tr >
  25. <td >John</td>
  26. <td>1213458</td>
  27. <td>Germany</td>
  28. <td>$34.37</td>
  29. <td>Download</td>
  30. </tr>
  31. <tr>
  32. <td>oKathleen</td>
  33. <td>1213459</td>
  34. <td>Germany</td>
  35. <td>$23.67</td>
  36. <td>Download</td>
  37. </tr>
  38. </table>

然后把相应的CSS设置也化简,只保留对table和td的基本设置,代码如下。

折叠展开CSS 代码复制内容到剪贴板

  1. table {
  2. color: #565;
  3. font: 12px arial;
  4. }
  5. td {
  6. background-color:#DFC;
  7. border-bottom: 2px solid #B3DE94;
  8. border-top: 3px solid #FFFFFF;
  9. padding: 9px;
  10. }

二、在Firefox和IE 8中实现鼠标指针经过时整行变色

下面使鼠标指针经过某一行的时候,该行的背景变色。对于Firefox浏览器而言,仅仅通过CSS的“:hover”伪类便可以实现该效果,添加如下代码:

折叠展开CSS 代码复制内容到剪贴板

  1. tr:hover{
  2. background-color: #595;
  3. color:#fff;
  4. }

这段设置的意图是,某一行在鼠标指针经过时,会使用“tr:hover”设置的背景色(#595)和文字颜色(#fff,白色)。然而,在Firefox中的效果只有文字颜色变化,背景色没有变化。这是什么原因呢?lodidance.com

原因在于前面的样式设置中,背景色是在td中设置的,这里tr的:hove伪类的优先级低于td,因此背景色还是按照td的设置,将背景色的设置从td中移出来,井增加到tr中,效果就会正常了。

这个方法在Fire fox和IE 7/8中都是有效的。IE 6浏览器不支持<tr>标记的“:hover”伪类别,因此下一小节介绍如何采用JavaScript动态的配合,实现同样的效果。

三、在IE 6中实现鼠标指针经过时整行变色

① 首先,在上面的CSS设置中增加一个“.hover”类选择器。

折叠展开CSS 代码复制内容到剪贴板

  1. tr:hover,
  2. tr.hover{
  3. background-color: #595;
  4. color:#fff;
  5. }

在</table>和</body>之间,增加JavaScript语句,代码如下。

折叠展开JavaScript 代码复制内容到剪贴板

  1. <script language="javascript">
  2. var rows = document.getElementsByTagName(‘tr‘);
  3. for (var i=0;i<rows.length;i++){
  4. rows[i].onmouseover = function(){       //鼠标指针在行上面的时候
  5. this.className = ‘hover‘;
  6. }
  7. rows[i].onmouseout = function(){        //鼠标指针离开时
  8. this.className = ‘‘;
  9. }
  10. }
  11. </script>

分析 documenm.getElementsByTagN-me(‘tr‘)”的作用是取得一个数组,数组中的每个元素就是DOM中的各个tr节点,这个数组存储在“rows”变量中。

然后用一个循环结构,对每一个tr节点的onmouseover件增加处理函数,这个函数将会在该tr被鼠标指针经过的时候执行,这个函数的内容是:

折叠展开JavaScript 代码复制内容到剪贴板

  1. this.className = ‘hover‘;

这里的this就是代表该节点本身,因此该语句的含义是,使得该节点的CSS类名为hover。这个类别前面在CSS部分已经设置了,因此就实现了鼠标指针经过时,背景色发生改变。

接下来就要使鼠标指针离开的时候,恢复原来的背景色.这需要为onmouseover事件(也就是鼠标指针离开)增加处理函数,内容是使类别名为空字符串,即清除了前面设置的“hover”,这样就恢复原来的背景色了。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/css/jc/735.html

10.3 鼠标指针经过时整行变色提示的表格

时间: 2024-10-13 16:25:27

10.3 鼠标指针经过时整行变色提示的表格的相关文章

SS如何实现把鼠标放在行上整行变色

CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content=&quo

如何实现鼠标滑过整行变色

如何实现鼠标滑过整行变色:在很多网站都有这样的效果,那就是当鼠标放在新闻列表一行上的时候,整行就会变色,虽然使用CSS也能够实现此种功能,但是由于众多浏览器版本对于CSS3并没有良好的支持,所以在当前情况下,使用jQuery实现此种功能是一个不错的选择.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author"

10.4 Excel方式二维变色提示的表格

在10.3节中,整行变色提求鼠标指针经过的效果已经完成了,接下来继续改进它.实现类似于Excel的行列的二维提示,效果如图1所示,当鼠标指针经过某一个单元格时.相应的列头和行头单元格会同时变色. 实例文件位于网页学习网CSS教程资源的“第10章\02\pretty-3.htm”. 图1 表格的行列二维变色提示 注意:本案例需要不少JavaScript编程的配合,如果读者缺乏相应基础,学起来可能会有一点困难. 一.改造CSS代码 首先改造CSS设置,这个效果单纯使用CSS是无法实现的,必须要使用j

鼠标悬浮图片时弹出透明提示图层的jQuery特效

源码: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>CollagePlus for jQuery Example</title> <link rel="stylesheet" type="text/css"

CSS实现的鼠标悬浮整行背景变色代码

CSS实现的鼠标悬浮整行背景变色代码:在新闻列表形式的不居中,为了清晰的分辨每一行,一般当鼠标悬浮在一行上的时候,能够实现当前行整行变色,下面就通过代码实例简单介绍一下如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

在网页中添加自定义鼠标指针

body{cursor:url('鼠标指针图片网址')} a:hover{cursor:url('鼠标指针图片网址')} 说明1:第一行是鼠标指针初始形态,第二行是鼠标指针碰到链接的形态. 说明2:你需要两个鼠标指针图片(最好这两个图片是一套或是相近的). 说明3:鼠标指针的图片格式是.cur和.ani,不是.jpg..gif或是其它图片格式,这点请注意. 说明4:很遗憾,博客中国不支持任何一种鼠标指针图片格式的上传,大家要实现指针变换,要么就找一些别的网站贴出来的现成的指针图片链接地址,要么就

第10章 菜单及其它资源_10.1 图标、鼠标指针、字符串等资源

10.1 图标.鼠标指针.字符串和自定义资源 10.1.1 向程序添加图标 (1)加载图标:(注意:第1个参数为hInstance,不能为NULL表示从程序本身加载) 图标ID为数字 ①wndclass.hIcon = LoadIcon(hInstance,MAXINTRESOURCE(IDI_ICON); ②wndclass.hIcon = LoadIcon(hInstance,MAXINTRESOURCE(125) 图标ID为字符串 ①wndclass.hIcon = LoadIcon(hI

截图时如何显示鼠标指针,如何带鼠标指针截图,带鼠标指针截图的方法,怎么在截图时把鼠标指针一起截上

截图时如何显示鼠标指针,如何带鼠标指针截图,带鼠标指针截图的方法,怎么在截图时把鼠标指针一起截上 可以借助截图软件来实现, FSCapture(全称FastStone Capture),可是实现截图是带着鼠标指针 HprSnap.可是实现截图是带着鼠标指针 原文地址:https://www.cnblogs.com/GaoNa/p/12304366.html