萬盛學電腦網

浏覽器 windows 10 wps office 殺毒軟件 數據庫 excel教程 文件管理 word教程 網頁制作 裝機必備軟件 linux教程

萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> JS+DIV表單實例——鼠標移上背景變色和文字提示

JS+DIV表單實例——鼠標移上背景變色和文字提示

class="area">

一個表單設計實例，鼠標移上背景變色，同時出現文字提示。直接看演示吧！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS實現的一種交互體驗</title> <style> @charset "utf-8"; /*元素初始值*/ html {background: #FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,ins,hr{margin: 0px;padding: 0px;} p{cursor: text;} h1,h2,h3,h4,h5,h6{font-size:100%;} ol,ul{list-style-type: none;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} table{border-collapse:collapse;} fieldset,img{border:0;} img{display:block;} caption,th{text-align:left;} body{position: relative;font-size:62.5%;font-family: "宋體"} a{text-decoration: none;} /*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 {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;} </style> <script type="text/javascript"> function suckerfish(type, tag, parentId) { if (window.attachEvent) { window.attachEvent("onload", function() { var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); type(sfEls); }); } } hover = function(sfEls) { for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" hover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" hover\\b"), ""); } } } suckerfish(hover, "li"); </script> </head> <body> <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> </body> </html>

萬盛學電腦網

萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> JS+DIV表單實例——鼠標移上背景變色和文字提示

JS+DIV表單實例——鼠標移上背景變色和文字提示

DivCSS教程排行

程序編程推薦

熱門文章

相關文章

圖片文章

按鈕是否真的無可替代

HTML制作網頁體驗其中樂趣

我來教你玩轉iis防盜鏈 MYIIS-VIF超級防盜鏈

台灣美女聊聊設計師的鄙視鏈

萬盛學電腦網 | 設為首頁 | 加入收藏