感觉这种交互，比把鼠标放到头像上右侧内容马上就改变要好。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <style type="text/css"> body{ margin:50px; } .touxiang{ border:1px solid #E5D1A1; text-align:center; width:150px; height:150px; background:#FFFDD2; float:left; } .neirong{ width:300px;height:500px; margin-left:30px;border:1px solid #E5D1A1;background:#fff;float:left; } </style> </head> <body> <div class="touxiang">这里是头像</div> <div class="neirong">这里是内容区域</div> </body> <script type="text/javascript"> function changetext(){ $(".neirong").text('hahaha'); } $(function(){ $(".touxiang").hover(function(){ timeout_name = setTimeout("changetext()",1500); },function(){ clearTimeout(timeout_name) ; }) }) </script> </html>
