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

 
 
 

  
  
  

  
  
  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  
  
  

  
  
  

  
  
  

  
  
  
content="text/html;charset=utf-8"/>
  
  
  

  
  
  

  
  
  

  
  
  
.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'
  
  
  
 } 
  
  
  
  ) 
  
  
  
} 
  
  
  

  
  
  

  
  
  

  
  
  

  
  
  
致力于Web标准在中国的应用及发展