window.addEvent('domready', function(){ $('feedback').setStyle('opacity', 0); $$('input, textarea').addEvent('focus', function(){ $$('input, textarea').removeClass('focused'); $(this).addClass('focused'); }); // 初始化helptext 数组,存储帮助文本 var helptext = []; //帮助内容 helptext['hName'] = 'Enter your first and last name'; helptext['hEmail'] = 'Enter a valid email address'; helptext['hWebsite']='Enter a valid website url'; helptext['hComment'] = 'Leave your feedback'; // 给 span.help 添加事件 $$('.help').addEvents({ 'mouseover' : function() { $('feedback').tween('opacity', 1); // 获得 span's 的 ID spanID = $(this).get('id'); // 设置 feedback div 的内容 //使用spanID 索引数组 $('feedback').set('html', helptext[spanID]); }, 'mouseout' : function() { $('feedback').tween('opacity', 0); } }); });
<form id="commentform" action="" method="get"> <p> <label for="name">Name : <span class="help" id="hName">(?)</span></label> <input id="name" name="name" tabindex="1" type="text"> </p> <p> <label for="email">Email :<span class="help" id="hEmail">(?)</span> </label> <input id="email" name="email" tabindex="2" type="text"> </p> <p> <label for="url">Website :<span class="help" id="hWebsite">(?)</span></label> <input id="url" name="url" tabindex="3" type="text"> </p> <p> <label for="comment">Comment :<span class="help" id="hComment">(?)</span></label> <textarea id="comment" name="comment" cols="" rows="" tabindex="4"></textarea> </p> <p align="center"> <input name="submit" type="button" tabindex="5" value="Submit"> </p> </form> <!-- 拥有用户反馈 --> <div id="feedback"> </div>
<!-- body{ font-family: Verdana, Geneva, sans-serif; font-size: 12px; } #commentform{ border: 1px solid #cac9b9; padding: 5px; width: 450px; } #commentform p { margin-bottom: 5px; } #commentform label { float: left; width: 90px; } #commentform input,#commentform textarea { border: 1px solid #cac9b9; background: #fff; } #commentform textarea{ width: 200px; } #commentform .focused { border:1px solid #888; background-color: #ffffaa; /*css3 outline*/ outline: 2px solid #ffffaa; } #feedback { width:200px; position:absolute; top:15px; left:315px; border:1px solid #f90; background-color:#ffc; padding:5px; font:bold 12px Verdana, Geneva, sans-serif; } .help { color:#009; font:bold 12px Arial, Helvetica, sans-serif; cursor:pointer; } -->