CSS sprite实例教程:li:hover修改密码

Codemoz! 会员信息修改的部分用到了这个效果，说难不难。要点是li:hover（IE6下使用JS模拟），CSS sprite。效果见下图：

HTML部分：

<ol id="need">
  <li><label class="old_password">原始密码：</label> <input name='''' type=''password'' id='''' /></li>
  <li><label class="new_password">新的密码：</label> <input name='''' type=''password'' id='''' /><dfn>（密码长度为6~20字节。不想修改请留空）</dfn></li>
  <li><label class="rePassword">重复密码：</label> <input name='''' type=''password'' id='''' /></li>
  <li><label class="email">邮箱设置：</label> <input name='''' type=''text'' id='''' /><dfn>（Codemoz! 承诺绝不会给您发送任何垃圾邮件。）</dfn></li>
</ol>

 CSS部分：

/*demo所用元素值*/
#need {margin: 20px auto 0;width: 610px;}
#need li {height: 26px;width: 600px;font: 12px/26px Arial, Helvetica, sans-serif;background: #FFD;border-bottom: 1px dashed #E0E0E0;display: block;cursor: text;padding: 7px 0px 7px 10px!important;padding: 5px 0px 5px 10px;}
#need li:hover,#need li.hover {background: #FFE8E8;}
#need input {line-height: 14px;background: #FFF;height: 14px;width: 200px;border: 1px solid #E0E0E0;vertical-align: middle;padding: 6px;}
#need label {background: url(../images/icon_sprite.gif) no-repeat;padding-left: 30px;}
#need label.old_password {background-position: 0 -277px;}
#need label.new_password {background-position: 0 -1576px;}
#need label.rePassword {background-position: 0 -1638px;}
#need label.email {background-position: 0 -429px;}
#need dfn {display: none;}
#need li:hover dfn, #need li.hover dfn {display:inline;margin-left: 7px;color: #676767;}

 JS部分：

function suckerfish(type, tag, parentId) {
 if (window.attachEvent) {
  window.attachEvent("onload", function() {
   var sfEls = (parentId==nu

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!