CSS:網頁表單實現鼠標懸停交互效果

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS:網頁表單實現鼠標懸停交互效果

CSS:網頁表單實現鼠標懸停交互效果

編輯：CSS進階教程

網頁制作poluoluo文章簡介：我們有沒有更好的辦法來實現輸入框input樣式懸停交互的效果呢？我們有沒有更好的辦法來實現輸入框input樣式懸停交互的效果呢？

制作表單的時候，實現鼠標懸停交互效果有多種方法:
1、在xhtml中直接寫入onmouseover、onmouseout腳本就可以實現了，但這樣就違背了web標准所倡導的內容、表現相分離的原則。以後若要對此進行修改也將會很繁瑣。這樣直接寫入xhtml也會讓頁面代碼增加，如果只是一個input輸入框或許是無所謂的，如果是幾十個幾百個，增加的字節數就很寵大了。
　　2、在xhtml中加入小腳本，鼠標經過時可以切換CSS。具體內容請看這篇文章。雖然實現了內容、表現相分離，以後的修改也會很方便。但同樣會讓頁面代碼增加。

　　我們有沒有更好的辦法來實現輸入框input樣式懸停交互的效果呢？
　　我們今天就討論這樣的方法，直接在CSS文件中寫入懸停交互效果的小腳本。不但實現了內容與表現分離，而且使xhtml代碼減小，促進了代碼重用、更加的優化。
　　這一方法的原理，主要是應用CSS的expression，關於expression的更多介紹，請看這篇文章。

input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}

上面的代碼，聲明了，當鼠標移上去的時候，邊框的顏色是#060，當鼠標移除的時候邊框的顏色是#c00。我們看一下運行效果：

<!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>用CSS控制輸入框input懸停交互樣式</title>
<style type="text/css">
<!--
input {border:1px solid #c00;}
input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}
-->
</style>
</head>
<body>
姓名：<input type="text" /><br />
年齡：<input type="text" /><br />
性別：<input type="text" /><br />
手機：<input type="text" /><br />
地址：<input type="text" /><br />
</body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]
你也可以這樣做

<!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>用CSS控制輸入框input懸停交互樣式</title>
<style type="text/css">
<!--
input {border:1px solid #c00;　background:#fff; }
input {star : expression(
onmouseover=function(){this.style.backgroundColor="#eee"},
onmouseout=function(){this.style.backgroundColor="#fff"})}
.in40 {width:40px;}
.in80 {width:80px;}
.in120 {width:120px;}
.in200 {width:200px;}
-->
</style>
</head>
<body>
姓名：<input class="in80" type="text" /><br />
年齡：<input class="in40" type="text" /><br />
性別：<input class="in40" type="text" /><br />
手機：<input class="in120" type="text" /><br />
地址：<input class="in200" type="text" /><br />
</body>
</html>

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

CSS進階教程

腳本控制三行三列自適應高度DIV布局: 這個例子是用JS腳本控制並列DIV的高度,通常在DIV布局中,自適應高度一直是比較頭疼的問題,一般
CSS教程:認識CSS初始化(重設浏覽器的樣式): 網頁制作poluoluo文章簡介：為什麼要初始化CSS？以前破洛洛講過CSS初始化是指重設浏覽器的樣
CSS教程:征服高級CSS選擇器: 網頁制作poluoluo文章簡介：CSS是對網頁設計師可用的最強大的工具之一。使用它我們可以在幾分鐘

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS實例:vertical-align屬性讓網頁層居中 CSS網頁設計：百分比進行背景圖片定位 CSS常用屬性縮寫實例 CSS教程:Mozilla建議的css書寫順序 CSS3 Transform的perspective屬性 CSS實例教程:CSS指針 CSS網頁制作教程:表單button的行高 CSS在IE和Nascape的顯示差別超級漂亮的表格:彩色背景 css3陰影屬性box-shadow注意事項

DIV CSS 佈局教程網

相關文章