CSS中编写脚本实现交互效果-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>

[可先修改部分代码再运行查看效果]

【编辑推荐】