以下代码实现效果:1.表格隔行变色。2.鼠标悬停在表格行上时变色。
一:在页面内引入jquery.js。我使用的是jquery-1.6.min.js。
二:加入如下js代码
<script type="text/javascript">
//隔行变色
$(document).ready(function(){
$(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时,执行函数
$(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over,并且当鼠标一出该行时执行函数
$(this).removeClass("over");}) //移除该行的class
$(".stripe_tb tr:even").addClass("alt"); //给class为stripe_tb的表格的偶数行添加class值为alt
});
</script>
三:添加如下CSS样式表
/*注意选择器的层叠关系*/
.stripe_tb tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/
.stripe_tb tr.over td{background:#FEF3D1} /*这个将是鼠标高亮行的背景色
四:给对应表格<table>标签加上class="stripe_tb"属性
分享到:
相关推荐
jQuery鼠标悬停图片变色放大显示效果基于jquery-1.11.1.min.js制作,鼠标经过图片,图片变色放大显示。
jQuery鼠标悬停图片变色放大显示效果
js代码 [removed] $(function(){ // 边框效果--移入 function biankuang(){ ... $('.biankuang_1').stop(true).... jQuery鼠标悬停图片边框动画特效是一款鼠标移动商品图片的时候动画显示红色边框的动画代码。
hover(over,out)一个模仿悬停事件的方法,下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下
jQuery实现的悬停图片变色并放大特效源码.zip
代码简介:jquery鼠标悬停导航下划线滑出效果是一款很有创意,小清新风格的导航特效。
table鼠标经过时整行变色 jquerytable鼠标经过时整行变色 jquery
实现了一个山东省地图,当鼠标悬停在某个区域上方的时候区域变色,并且支持超链接。下方显示这个市区的名称。容易部署,仅仅使用了html热点,js和几张png图片,没有使用flash也没有使用SVG等其他插件。
jQuery悬停图片变色放大特效
jQuery的表格悬停变色 恢复,表格点击变色/恢复,点击行选Checkbox
H5 Canvas鼠标悬停爱心变色特效.zip
这是一款真正响应式的jQuery和css3斑马线表格美化插件。该表格插件使用无序列表制作,并有响应式、隔行变色斑马线、适用于移动设备等特定。
jQuery悬停图片变色放大特效.zip
代码如下: $(‘#<%=AllEvent.ClientID%> tr:not(:has(“th”))’).hover(function () { $bg = $(this).css(‘background-color’); $(this).css(‘background-color’, ‘#ffc4c6’); }, function () { $...
jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码。
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
jquery背景颜色悬停渐变
非常实用的特效代码,可以完美运行,可以二次修改!