CSS中編寫腳本實現交互效果

作者：52css 2010-09-09 11:16:06

我們瀏覽網頁的時候，經常會碰到一些交互的效果，例如容器在鼠標移上去的時候，會發生一些變化，這里向大家描述一下如何在CSS中寫腳本實現交互效果。

本文向大家簡單介紹一下如何在CSS中編寫腳本實現交互效果，舉個簡單的例子，例如容器在鼠標移上去的時候，會發生一些變化，這些效果，可以用多種方法來實現，這里就和大家分享一下其中的一種。

如何在CSS中編寫腳本實現交互效果？

我們瀏覽網頁的時候，經常會碰到一些交互的效果。例如容器在鼠標移上去的時候，會發生一些變化。這些效果，可以用多種方法來實現。現在我們要解決的是如何在CSS中寫腳本實現交互效果。

CSS代碼如下：

ExampleSourceCode

event:expression(  
onmouseover=function()  
{  
this.style.backgroundColor='#ccc' 
this.style.border='1pxsolid#000' 
},  
onmouseout=function()  
{  
this.style.backgroundColor='#f0f0f0' 
this.style.border='1pxsolid#c00' 
}  
)

　　這段代碼的意思是定義了鼠標的兩種不同的狀態，onmouseover、onmouseout，在兩種不同的狀態下，對元素應用不同的樣式設置。這樣就達到了我們想要的交互效果。

請看下面的實例：

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"
content="text/html;charset=utf-8"/> 
<title>www.mb5u.com</title> 
<styletypestyletype="text/css"> 
 
.show{  
width:600px;  
height:58px;  
margin:50pxauto0auto;  
line-height:58px;  
border:1pxsolid#c00;  
background:#f0f0f0;  
text-align:center;  
/*mb5u提醒您重點注重查看下面的代碼*/  
event:expression(  
onmouseover=function()  
 {  
 this.style.backgroundColor='#ccc' 
 this.style.border='1pxsolid#000' 
 },  
onmouseout=function()  
 {  
 this.style.backgroundColor='#f0f0f0' 
 this.style.border='1pxsolid#c00' 
 }  
  )  
}  
 
</style> 
</head> 
<body> 
<divclassdivclass="show">致力于Web標準在中國的應用及發展</div> 
</body> 
</html>

[可先修改部分代碼再運行查看效果]

【編輯推薦】

DIV CSS網頁布局時合理架構CSS
JavaScript動態創建div屬性和樣式
SPAN元素和DIV元素的區別
技術分享 XHTML中如何引入五大CSS樣式
探究CSS中border:none;與border:0;的區別

責任編輯：佚名來源： 52css.com

CSS 交互