当鼠标移动时出现特效的JQuery代码

发布时间：2020-12-14 22:48:31 所属栏目：资源来源：网络整理

导读：复制代码代码如下: %@ page language="java" import="java.util.*" pageEncoding="UTF-8"% html head style type="text/css" *{ text-align: center; font-size: 12px; } table{ border-collapse: collapse; width: 40%; } table tr td{ border: red solid

复制代码代码如下:

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 

<html> 
<head> 
<style type="text/css"> 
*{ 
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; 
} 
</style> 
//导入JQuery包 
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 
//写JQuery事件控制页面 
<script type="text/javascript"> 
$(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"); 
}); 
}); 
</script> 
</head> 
<body> 
<div class="mytop"> 
<table align="center"> 
<tr> 
<td id="p1">班级管理</td> 
<td id="p2">学生管理</td> 
</tr> 
</table> 
</div> 
<div class="myclass"> 
<table align="center"> 
<tr> 
<td>班级编号</td> 
<td>班级名称</td> 
<td>备注</td> 
</tr> 
<tr> 
<td>A1331</td> 
<td>Java</td> 
<td>优秀</td> 
</tr> 
<tr> 
<td>A1332</td> 
<td>Java Web</td> 
<td>优秀</td> 
</tr> 
</table> 
</div> 
<div class="mystu"> 
<table align="center"> 
<tr> 
<td>编号</td> 
<td>姓名</td> 
<td>性别</td> 
<td>所在班级</td> 
</tr> 
<tr> 
<td>100</td> 
<td>程博文</td> 
<td>男</td> 
<td>A1339</td> 
</tr> 
<tr> 
<td>101</td> 
<td>胡晓丽</td> 
<td>女</td> 
<td>A1339</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!