熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> Javascript >> 正文

當鼠標移動時出現特效的JQuery代碼

2022-06-13   來源: Javascript 

  復制代碼 代碼如下:

  <%@ page language=java import=javautil* pageEncoding=UTF%>

<html>
<head>
<style type=text/css>
*{
textalign: center;
fontsize: px;
}
table{
bordercollapse: collapse;
width: %;
}
table tr td{
border: red solid px;
lineheight:px;
}
myclassmystu{
display: none;
}
myclass table tr tdmystu table tr td
{
bordertop: solid px red;
}
</style>
//導入JQuery包
<script type=text/javascript src=js/jqueryjs></script>
//寫JQuery事件控制頁面
<script type=text/javascript>
$(function(){
//事件注入點
$(#p)mouseover(function(){
$(myclass)show(slow);
$(mystu)hide();
$(this)css(backgroundcolor#ccff);
$(#p)css(backgroundcolor#ffffff);
});
$(#p)mouseover(function(){
$(mystu)show(slow);
$(myclass)hide();
$(this)css(backgroundcolor#ccff);
$(#p)css(backgroundcolor#ffffff);
});
});
</script>
</head>
<body>
<div class=mytop>
<table align=center>
<tr>
<td id=p>班級管理</td>
<td id=p>學生管理</td>
</tr>
</table>
</div>
<div class=myclass>
<table align=center>
<tr>
<td>班級編號</td>
<td>班級名稱</td>
<td>備注</td>
</tr>
<tr>
<td>A</td>
<td>Java</td>
<td>優秀</td>
</tr>
<tr>
<td>A</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></td>
<td>程博文</td>
<td>男</td>
<td>A</td>
</tr>
<tr>
<td></td>
<td>胡曉麗</td>
<td>女</td>
<td>A</td>
</tr>
</table>
</div>
</body>
</html>


 
From:http://tw.wingwit.com/Article/program/Java/Javascript/201401/30280.html
    推薦文章
    Copyright © 2005-2022 電腦知識網 Computer Knowledge   All rights reserved.