`

表格鼠标经过时变色

阅读更多

如何实现鼠标经过时变色呢?

如图:

 

------------------------------------

 如何实现鼠标放在上面时表格的行变色呢?

有如下两种方式:

方式一:使用纯css

div.queryResultDiv table.productList tr:nth-child(n+2):hover
{
	background-color: #B0D2FF;
}

 说明:n从零开始,所以hover从第二行才有效,因为表格第一行是标题.

 

方式二:使用javascript脚本:

$("div.navarea #main2 tr").bind('mouseover',function(){
		var href22=$(this).find('a');
		var selectedHref=$('div.navarea #main2 li.current a');
		$('#main2 tr').addClass("not_current").removeClass("current");
    href22.addClass("current");
	});
});

 注意:上面的js代码依赖jquery

参考:http://hw1287789687.iteye.com/blog/2184358

 

  • 大小: 80.4 KB
  • 大小: 73.5 KB
分享到:
评论

相关推荐

    js 实现 鼠标经过表格时列变色

    js 实现 鼠标经过表格时列变色! 值得下载看看!资源免费,大家分享!!

    table鼠标经过时整行变色 jquery

    在网页设计中,表格(Table)是一种常见的数据...通过这种方式,你可以实现表格鼠标经过时整行变色的效果,同时保持与其他框架的兼容性。在实际应用中,可以根据需求调整颜色、动画效果等细节,以达到最佳的视觉效果。

    javascript 表格鼠标移动变色

    鼠标移动表格行上行变色的JS脚本,鼠标移动表格行上行变色的JS脚本,

    鼠标经过表格变色

    通过jquery给经过的表格设置css背景变色效果

    表格隔行换色 鼠标移过变色

    "表格隔行换色 鼠标移过变色"是两种常见的表格样式优化手段,它们可以使得表格内容更易于阅读,同时提升用户体验。在JavaScript(JS)的帮助下,我们可以轻松实现这些效果。 1. **隔行换色**: 隔行换色通常使用...

    隔行变色鼠标移动变色表格

    CSS+JS 实现表格隔行变色 鼠标移动变色

    jquery表格隔行变色鼠标滑过竖直表格内容变色效果

    本主题涉及的是使用jQuery实现的一种常见的用户界面优化技巧——"表格隔行变色"以及"鼠标滑过时竖直表格内容变色效果"。这种效果可以提升表格的可读性,使得数据更加清晰易辨。 首先,我们来讨论“表格隔行变色”。...

    表格渲染(悬浮变色,隔行换色,点击变色)

    /** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */

    jQuery鼠标移动表格变色及修改单元格值

    标题中的“jQuery鼠标移动表格变色及修改单元格值”是指使用jQuery库来实现一个功能,当鼠标在HTML表格上移动时,所经过的单元格会改变颜色,并且用户能够编辑表格中的单元格值。这个功能结合了jQuery的选择器、事件...

    jQuery 鼠标移动到表格变色特效

    在描述中提到的效果是,当鼠标移动到表格上时,表格会变色。这涉及到jQuery的事件处理。`mouseenter` 和 `mouseleave` 是两个与鼠标相关的事件,分别在鼠标进入和离开元素时触发。我们可以为这些事件绑定函数,以...

    js表格变色制作表格隔行变色,滑过选中变色特效

    为了提高用户的阅读体验,有时候我们需要对表格进行美化,例如实现隔行变色、鼠标滑过时选中变色等特效。本教程将详细介绍如何使用JavaScript来实现这些效果。 首先,让我们了解一下JavaScript在网页中的作用。...

    js实现表格变色(鼠标移动 选中变色)

    本教程将详细讲解如何通过JavaScript实现表格行在鼠标移动、选中复选框时的变色效果。 首先,我们需要一个包含表格数据的HTML文件,例如`test2l.html`。在这个文件中,我们将创建一个带有复选框的表格。基本的HTML...

    鼠标移动变色代码

    综上所述,“鼠标移动变色代码”巧妙地结合了HTML、CSS和JavaScript,实现了鼠标悬停时的动态色彩变换,增强了网页的互动性和美观度。开发者应熟悉这三种技术的基本语法和交互机制,以便在实际项目中灵活运用此类...

    易语言高级表格鼠标移动时改变行背景色API版

    在这个"易语言高级表格鼠标移动时改变行背景色API版"的项目中,我们关注的是如何在易语言中实现一个功能,即当鼠标在表格上移动时,动态地改变行的背景颜色。 首先,我们需要理解"高级表格"这一概念。在许多应用...

    displaytag分页和鼠标经过变色功能

    在上述例子中,我们看到了如何通过自定义装饰器 `OverOutWrapper` 实现鼠标经过表格行变色的功能。这个装饰器继承自Displaytag 提供的 `TableDecorator` 类,并重写了 `addRowId()` 方法。`addRowId()` 方法通常用于...

    PB数据窗口鼠标移动字体变色

    在“PB数据窗口鼠标移动字体变色”这个主题中,我们关注的是如何实现在用户鼠标移动到数据窗口某一行时,该行的字体颜色发生改变,以提供视觉反馈和增强用户体验。下面我们将深入探讨这一功能的实现原理和步骤。 1....

    鼠标滑过变色

    标题“鼠标滑过变色”通常指的是网页设计中的一种交互效果,当用户将鼠标光标悬停在某个元素上时,该元素的颜色或样式会发生变化。这种效果在导航菜单、按钮或其他可点击元素中非常常见,能提升用户体验,提供视觉...

    javascript实现网页中表格的行随着鼠标移动而变色,实时变色表格行

    javascript实现网页中表格的行随着鼠标移动而变色,实时变色表格行

    易语言高级表格鼠标移动时改变行背景色

    当用户将鼠标移动到表格的某一行时,我们可能希望动态地改变这一行的背景色,以提供更好的视觉反馈或者突出特定的信息。这个功能可以通过监听鼠标的移动事件并自定义控件的画图行为来实现。 首先,我们需要理解...

    JavaScript实现鼠标经过表格某行时此行变色

    本文实例为大家分享了js鼠标经过表格某行时此行变色的具体代码,供大家参考,具体内容如下 表格表头为蓝色,表主体为白色,当鼠标放到表的非表头行时,这一行颜色变为黄色,鼠标离开时黄色消失。 <!DOCTYPE ...

Global site tag (gtag.js) - Google Analytics