近年来,Web 2.0的概念逐渐被广泛接受,其中很重要的一点是强调改善用户体验,例如上一节的例子中,把表格设置为交替背景色,可以使访问者在浏览表格时有更好的体验。 然而对于长时间审核大量数据和浏览表格的用户来说,即使是隔行变色的表格,长时间阅读这样的表格仍然会感到疲劳。而且对于数据壁很大的表格,特别容易看错行或者列。如果参考微软公司Excel软件的做法,我们就可以发现很多可以改进的地方。 例如,在一个行列都很多的表格中,如果能像在Excel中那样,随时以高亮的方式提示一个单元格对应的行号(或行的名称1)和列号(或列的名称),就会大大改进浏览者的体验了。 在本节的案例中先实现一个比较容易的效果,当鼠标指针经过表中的某一个单元格时,该单元格所在的行能够动态地变色,如图1所示,这样就会大大减少访问者看错行的可能性。这实现起来比横竖两个方向的变色要容易一些。 实例文件位于网页学习网CSS教程资源中的“第10章\02\pretty-2.htm”。
一、搭建HTML结构 仍然以上一节中制作的表格为例,由于本案例的重点是JavaScript的编写,因此先对表格进行化简,把表格设置为最基本的HTML结构,这样便于理解JavaScript的作用原理。把表头的标记全部换为通用的<td>标记,HTML代码如下。lodidance.com 折叠展开XML/HTML 代码复制内容到剪贴板
然后把相应的CSS设置也化简,只保留对table和td的基本设置,代码如下。 折叠展开CSS 代码复制内容到剪贴板
二、在Firefox和IE 8中实现鼠标指针经过时整行变色 下面使鼠标指针经过某一行的时候,该行的背景变色。对于Firefox浏览器而言,仅仅通过CSS的“:hover”伪类便可以实现该效果,添加如下代码: 折叠展开CSS 代码复制内容到剪贴板
这段设置的意图是,某一行在鼠标指针经过时,会使用“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 代码复制内容到剪贴板
在</table>和</body>之间,增加JavaScript语句,代码如下。 折叠展开JavaScript 代码复制内容到剪贴板
分析 documenm.getElementsByTagN-me(‘tr‘)”的作用是取得一个数组,数组中的每个元素就是DOM中的各个tr节点,这个数组存储在“rows”变量中。 然后用一个循环结构,对每一个tr节点的onmouseover件增加处理函数,这个函数将会在该tr被鼠标指针经过的时候执行,这个函数的内容是: 折叠展开JavaScript 代码复制内容到剪贴板
这里的this就是代表该节点本身,因此该语句的含义是,使得该节点的CSS类名为hover。这个类别前面在CSS部分已经设置了,因此就实现了鼠标指针经过时,背景色发生改变。 接下来就要使鼠标指针离开的时候,恢复原来的背景色.这需要为onmouseover事件(也就是鼠标指针离开)增加处理函数,内容是使类别名为空字符串,即清除了前面设置的“hover”,这样就恢复原来的背景色了。 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/css/jc/735.html |
10.3 鼠标指针经过时整行变色提示的表格