如何在CSS中寫腳本實現交互效果?_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
我們瀏覽網頁的時候,經常會碰到一些交互的效果。例如容器在鼠標移上去的時候,會發生一些變化。這些效果,可以用多種方法來實現。現在我們要解決的是如何在CSS中寫腳本實現交互效果。
CSS代碼如下:
示例代碼 [www.wf0088.com]
event:expression(
onmouseover = function()
{
this.style.backgroundColor='#ccc'
this.style.border='1px solid #000'
},
onmouseout = function()
{
this.style.backgroundColor='#f0f0f0'
this.style.border='1px solid #c00'
}
)
onmouseover = function()
{
this.style.backgroundColor='#ccc'
this.style.border='1px solid #000'
},
onmouseout = function()
{
this.style.backgroundColor='#f0f0f0'
this.style.border='1px solid #c00'
}
)
這段代碼的意思是定義了鼠標的兩種不同的狀態,onmouseover、onmouseout,在兩種不同的狀態下,對元素應用不同的樣式設置。這樣就達到了我們想要的交互效果。
請看下面的實例:
代碼調試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
相關Div+CSS教程:
- 相關鏈接:
- 教程說明:
Div+CSS教程-如何在CSS中寫腳本實現交互效果?。