表格鼠标经过时变色

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

如图:

 

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

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

有如下两种方式:

方式一:使用纯css

Css代码  

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

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

 

方式二:使用JavaScript脚本:

Js代码  

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

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

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

时间: 2024-09-19 20:31:18

表格鼠标经过时变色的相关文章

让Excel表格鼠标经过时显示图片

有时候,为了制作信息量大又简洁的表格,我们需要为Excel表格的单元格添加可隐藏的图片,并且当鼠标指向单元格,就自动显示图片,移开则不显示,这个鼠触互动效果是不是很酷? 要实现Excel表格中鼠标指向单元格就出现相关图片的互动效果,只要通过Excel 2007的添加图片批注功能就可以轻松做到. 下面,我们以制作产品列表为例,展示具体的添加图片方法. 鼠标指向单元格,自动显示预设图片 单个添加图片 右击目标单元格,选择"添加批注",删除批注输入框中所有文字,接着鼠标移动到批注输入框的边线

jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】_jquery

本文实例讲述了jQuery实现表格隔行及滑动,点击时变色的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

在DataGrid 表格控件中 怎么使 在鼠标拖动时, 选中其经过的单元格。

问题描述 请教一个问题,在DataGrid表格控件中怎么使在鼠标拖动时,选中其经过的单元格.我用的是WPF,看到有人说VisualTreeHelper.FindElementsInHostCoordinates方法(Point,UIElement)方法,但是WPF中并没有这种方法啊?各位大虾帮帮忙!!!! 解决方案 解决方案二:我刚好也遇到这个问题,帮忙顶一下解决方案三:在线等,求大神帮忙啊解决方案四:按着鼠标左键拖动?解决方案五:是的鼠标左键拖动选中多个值解决方案六:大侠有没有什么办法啊,我已

CSS+DIV实现鼠标经过背景变色

实现鼠标经过背景变色的方法有很多,今天我们介绍的是用CSS+DIV实现的方法. 方法一 #div:hover{background:#000000;}     解释:鼠标经过id为div的元素时背景变色     IE6.0.Firefox2.0.Opera 9.23都不行     方法二 <style> .d_over{background-color:#307172;} .d_out{background-color:#EFEFEF;}   哈哈哈哈哈     的标签是可以,可是,这样子会导

鼠标经过背景变色之CSS+DIV方法

  实现鼠标经过背景变色的方法有很多,今天我们介绍的是用CSS+DIV实现的方法. 方法一 #div:hover{background:#000000;} 解释:鼠标经过id为div的元素时背景变色 IE6.0.Firefox2.0.Opera 9.23都不行 方法二 <div onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFF

jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果_jquery

本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="c

鼠标经过文字变色

鼠标经过文字变色 下面为脚本显示区 鼠标经过时就会变色的文本  

css实现鼠标悬停时滑出层提示的方法

 本文实例讲述了css实现鼠标悬停时滑出层提示的方法.分享给大家供大家参考.具体分析如下: 这是一个简单的鼠标悬停提示特效,类似于alt标签,不过这一种是用纯CSS实现,扩展性好,而且在提示的层里可以加入图片或其它布局,这个要根据你的需要了.   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran

jQuery当鼠标悬停时放大图片的效果实例

这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分: 先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcac