CSS中編寫腳本實現交互效果
作者：52css
我們瀏覽網頁的時候，經常會碰到一些交互的效果，例如容器在鼠標移上去的時候，會發生一些變化，這里向大家描述一下如何在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>
[可先修改部分代碼再運行查看效果]
【編輯推薦】
責任編輯：佚名
來源：
52css.com
