本文介绍了一个使用jQuery实现的鼠标悬停显示内容效果。当鼠标悬停在标题上时，详细的内容将显示出来，移开鼠标后内容隐藏。此效果通过jQuery的bind方法绑定mouseover和mouseout事件来实现。
<!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>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
