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


Posted in Javascript onNovember 08, 2013
<%@ 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>

当鼠标移动时出现特效的JQuery代码 
Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
window.onresize 多次触发的解决方法
Nov 08 #Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 #Javascript
setTimeout和setInterval的深入理解
Nov 08 #Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 #Javascript
jquery ajax修改全局变量示例代码
Nov 08 #Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 #Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 #Javascript
You might like
PHP 柱状图实现代码
2009/12/04 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
php分页函数示例代码分享
2014/02/24 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
python实现飞船大战
2020/04/24 Python
Python之Sklearn使用入门教程
2021/02/19 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
C++面试题目
2013/06/25 面试题
P/Invoke是什么
2015/07/31 面试题
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
创建卫生先进单位实施方案
2014/03/10 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
十八大观后感
2015/06/12 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
MySQL存储过程及语法详解
2022/08/05 MySQL