欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

表格鼠标经过时变色

程序员文章站 2022-07-12 21:29:18
...

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

如图:
表格鼠标经过时变色
            
    
    博客分类: cssjavascript 鼠标经过变色onmouseoverhoverhover变色划过变色 
 

------------------------------------
表格鼠标经过时变色
            
    
    博客分类: cssjavascript 鼠标经过变色onmouseoverhoverhover变色划过变色 
 如何实现鼠标放在上面时表格的行变色呢?

有如下两种方式:

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

 

  • 表格鼠标经过时变色
            
    
    博客分类: cssjavascript 鼠标经过变色onmouseoverhoverhover变色划过变色 
  • 大小: 80.4 KB
  • 表格鼠标经过时变色
            
    
    博客分类: cssjavascript 鼠标经过变色onmouseoverhoverhover变色划过变色 
  • 大小: 73.5 KB