<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery事件</title> <mce:style type="text/css"><!-- .head { width:150px; color:Gray; } .content { width:150px; background-color:Gray; } --></mce:style><style type="text/css" mce_bogus="1"> .head { width:150px; color:Gray; } .content { width:150px; background-color:Gray; } </style> <mce:script src="../jquery/jquery-1.3.2.min.js" mce_src="jquery/jquery-1.3.2.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- $(function(){ $(function(){ //页面加载的时候就隐藏content $("div.content").hide(); }); //bind方法为head绑定mouseover,mouseout方法 $("#panel h5.head").bind("mouseover",function(){ $(this).next("div.content").show(); }); $("#panel h5.head").bind("mouseout",function(){ $(this).next("div.content").hide(); }) }) // --></mce:script> </head> <body> <div id="panel"> <h5 class="head">jquery简介介绍!</h5> <div class="content"> jquery是集prototype之后,又一款轻量级javascript框架. 其简洁的语法,跨平台!深受广大程序员的喜爱~! </div> </div> </body> </html>