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

151 阅读 0 评论 100 点赞

我是靠谱客的博主愤怒月光，最近开发中收集的这篇文章主要介绍当鼠标移动时出现特效的JQuery代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<%@ 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> 