當(dāng)鼠標(biāo)移動時(shí)出現(xiàn)特效的JQuery代碼

更新時(shí)間：2013年11月08日 17:51:31 作者：

當(dāng)鼠標(biāo)移動時(shí)出現(xiàn)特效，在某些情況下還是比較實(shí)現(xiàn)的，下面為大家介紹下通過JQuery是如何實(shí)現(xiàn)的，具體如下，感興趣的朋友可以參考下

 
<%@ 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> 
//導(dǎo)入JQuery包 
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 
//寫JQuery事件控制頁面 
<script type="text/javascript"> 
$(function(){ 
//事件注入點(diǎn) 
$("#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">學(xué)生管理</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>優(yōu)秀</td> 
</tr> 
<tr> 
<td>A1332</td> 
<td>Java Web</td> 
<td>優(yōu)秀</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> 

您可能感興趣的文章:

相關(guān)文章

JQuery動態(tài)添加和刪除表格行的方法
這篇文章主要介紹了JQuery動態(tài)添加和刪除表格行的方法,實(shí)例分析了jQuery中動態(tài)操作表格行的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
checkbox全選/取消全選以及checkbox遍歷jQuery實(shí)現(xiàn)代碼
2009-12-12
JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動執(zhí)行
這篇文章主要介紹了JQuery實(shí)現(xiàn)當(dāng)鼠標(biāo)停留在某區(qū)域3秒后自動執(zhí)行，可以應(yīng)用于很多場景，需要的朋友可以參考下
2014-09-09
jQuery ctrl+Enter shift+Enter實(shí)現(xiàn)代碼
jQuery中對鍵盤事件進(jìn)行了修正調(diào)用函數(shù)的時(shí)候傳入事件即可。
2010-02-02
jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動畫滑動圖片切換效果
Slider Revolution插件是一款非常強(qiáng)大的插件了，我們可以利用它來制作出各種效果并且還支持移動設(shè)備，支持手機(jī)觸摸，鍵盤翻頁；它內(nèi)置幻燈、視頻播放計(jì)時(shí)器等等效果，具體我們來看看。
2015-06-06
jquery操作select詳解(取值,設(shè)置選中)
本篇文章主要是對jquery操作select(取值,設(shè)置選中)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼
本篇文章主要介紹了easyUI實(shí)現(xiàn)類似搜索框關(guān)鍵詞自動提示功能示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2016-12-12
jQuery 判斷元素整理匯總
本文給大家匯總介紹了jQuery的幾種判斷元素的方法，包括是否含有某 class、元素是否存在、是否 checked以及元素是否禁用，都是常用的方法，希望大家能夠喜歡
2017-02-02
jQuery中clone()函數(shù)實(shí)現(xiàn)表單中增加和減少輸入項(xiàng)
這篇文章給大家介紹了jQuery中clone()函數(shù)實(shí)現(xiàn)表單中增加和減少輸入項(xiàng)的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-05-05
springmvc接收jquery提交的數(shù)組數(shù)據(jù)代碼分享
這篇文章主要介紹了springmvc接收jquery提交的數(shù)組數(shù)據(jù)代碼分享，還是比較不錯(cuò)的，這里分享給大家，供需要的朋友參考。
2017-10-10