表格鼠标经过时变色

简介:

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

如图:

 

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

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

有如下两种方式:

方式一:使用纯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

相关文章
|
Windows
怎么让鼠标带黄色光圈?
怎么让鼠标带黄色光圈?
1382 0
怎么让鼠标带黄色光圈?
|
前端开发
前端——背景图片显示以及悬浮状态下变色的情况
前端——背景图片显示以及悬浮状态下变色的情况
|
6月前
鼠标不同方位移入特效
鼠标不同方位移入特效
|
6月前
|
前端开发 JavaScript
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
uniapp四个元素点击那个哪个变色,其他的还变原来的颜色
399 0
|
6月前
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
【推荐】实现跟随鼠标移动的浮动提示框、气泡框、Tip效果
|
前端开发
鼠标点击<input>输入框后边框发生颜色变化
鼠标点击<input>输入框后边框发生颜色变化
92 0
鼠标悬浮显示文字的简单方法
鼠标悬浮显示文字的简单方法
173 0
|
JavaScript
DOM ------ 鼠标滑过表格的行变色效果
DOM ------ 鼠标滑过表格的行变色效果
|
前端开发
鼠标经过时反转遮罩层
当鼠标移入指定的元素时,图片会旋转到遮罩层,然后显示相关介绍内容。
112 0
鼠标经过时反转遮罩层
点击图片或者鼠标划过切换样式的另一种写法
点击图片或者鼠标划过切换样式的另一种写法
66 0