当鼠标移动时出现特效的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 相关文章推荐
Jquery带搜索框的下拉菜单
May 06 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
完全深入学习Bootstrap表单
Nov 28 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
webpack3之loader全解析
Oct 26 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
JavaScript实现省市区三级联动
Feb 13 Javascript
vue3.0 上手体验
Sep 21 Javascript
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以及MYSQL日期比较方法
2012/11/29 PHP
php获取错误信息的方法
2015/07/17 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
基于javascript的异步编程实例详解
2017/04/10 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
表决心的诗句大全
2014/03/11 职场文书
北京奥运会口号
2014/06/21 职场文书
中队活动总结
2014/08/27 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015年维修工作总结
2015/04/25 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
golang生成并解析JSON
2022/04/14 Golang