jquery实现鼠标移动时出现特效的代码
本文导语: 本节内容: jquery鼠标移动特效 代码: 代码示例: *{ text-align: center; font-size: 12px; } table{ border-collapse: collapse; width: 40%; } table tr td{ border: red solid 1px; line-height:20px; } .myclass,.mystu{ display: none; } .myclass ...
本节内容:
jquery鼠标移动特效
代码:
*{
text-align: center;
font-size: 12px;
}
table{
border-collapse: collapse;
width: 40%;
}
table tr td{
border: red solid 1px;
line-height:20px;
}
.myclass,.mystu{
display: none;
}
.myclass table tr td,.mystu table tr td
{
border-top: solid 0px red;
}
//导入JQuery包
//写JQuery事件控制页面
$(function(){
//事件注入点
$("#p1").mouseover(function(){
$(".myclass").show("slow");
$(".mystu").hide();
$(this).css("background-color","#ccff99");
$("#p2").css("background-color","#ffffff");
});
$("#p2").mouseover(function(){
$(".mystu").show("slow");
$(".myclass").hide();
$(this).css("background-color","#ccff99");
$("#p1").css("background-color","#ffffff");
});
});
班级管理
学生管理
班级编号
班级名称
备注
A1331
Java
优秀
A1332
Java Web
优秀
编号
姓名
性别
所在班级
100
程三四
男
A1339
101
赵一二
女
A1339