如何在CSS中寫(xiě)腳本實(shí)現(xiàn)交互效果？_Div+CSS教程
教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
我們?yōu)g覽網(wǎng)頁(yè)的時(shí)候，經(jīng)常會(huì)碰到一些交互的效果。例如容器在鼠標(biāo)移上去的時(shí)候，會(huì)發(fā)生一些變化。這些效果，可以用多種方法來(lái)實(shí)現(xiàn)。現(xiàn)在我們要解決的是如何在CSS中寫(xiě)腳本實(shí)現(xiàn)交互效果。
CSS代碼如下：
示例代碼 [www.hl5o.cn]
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'
}
)
這段代碼的意思是定義了鼠標(biāo)的兩種不同的狀態(tài)，onmouseover、onmouseout，在兩種不同的狀態(tài)下，對(duì)元素應(yīng)用不同的樣式設(shè)置。這樣就達(dá)到了我們想要的交互效果。
請(qǐng)看下面的實(shí)例：
代碼調(diào)試框 [www.hl5o.cn]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)Div+CSS教程：
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ)：常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- XHTMLCSS網(wǎng)頁(yè)布局中ID與class的理解應(yīng)用
- 用PhotoShop兩分鐘完成一個(gè)xhtml css首頁(yè)
- 符合WEB標(biāo)準(zhǔn)的div css導(dǎo)航下拉菜單
- CSS網(wǎng)頁(yè)布局時(shí)常犯的幾種小錯(cuò)誤
- CSS三列浮動(dòng)中間列寬度自適應(yīng)
- 用ul標(biāo)簽來(lái)實(shí)現(xiàn)四行三列“表格式”布局
- Div CSS三列布局最先顯示中列的方法
- 阻礙你學(xué)習(xí)CSS的因素思維的轉(zhuǎn)變HTML結(jié)構(gòu)化
- 如何讓IE ff Opera同時(shí)支持Alpha透明？
- 經(jīng)典一例CSS表單form布局！
猜你也喜歡看這些
- CSS布局實(shí)例：僅一張圖片實(shí)現(xiàn)圓角！
- HowCSSLayoutWorks-如何進(jìn)行CSS布局
- 三列自由式布局770-1024自適應(yīng)寬度！
- DivCSS實(shí)例：CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- CSS菜單：一個(gè)圖片構(gòu)建菜單的三種狀態(tài)一例！
- DIVCSS菜單：超炫的菜單一張圖片實(shí)現(xiàn)鼠標(biāo)的兩種狀態(tài)及CSS當(dāng)前頁(yè)效果
- 圖片邊框變換CSSHover狀態(tài)效果一例
- DivCSS布局實(shí)例：詳解建立Flash上面浮動(dòng)層
- DIV CSS JS仿kijiji導(dǎo)航條
- DIVCSS布局實(shí)例：DIV CSS新聞列表制作
- 相關(guān)鏈接：
- 教程說(shuō)明：
Div+CSS教程-如何在CSS中寫(xiě)腳本實(shí)現(xiàn)交互效果？
。