利用CSS配合Javascript的可以做很多更酷的動態頁面效果 在本教程的最後給大家簡單介紹壹下CSS配合JS的應用 首先 我們要搞清楚事件和動作的概念 在客戶端腳本中 JavaScript 通過對事件進行響應來獲得與用戶的交互 例如 當用戶單擊壹個按鈕或者在某段文字上移動鼠標時 就觸發了壹個單擊事件或鼠標移動事件 通過對這些事件的響應 可以完成特定的功能（例如 單擊按鈕彈出對話框 鼠標移動到文本上後文本變色等） 下面介紹幾種常見的事件（還用更多事件 請查閱相關資料）
onClick 鼠標單擊事件 （是指鼠標按下 然後松開時產生 ）
onDblClick 鼠標雙擊事件 （是指鼠標快速按下 松開 並再次按下時產生 ）
onMouseDown 鼠標按下事件 （鼠標按下時即產生 ）
onMouseUp 鼠標釋放事件 （是指鼠標從按下的狀態到彈起 ）
onMouseMove 鼠標移動事件 （是指在特定元素上移動鼠標 ） onMouseOver 鼠標經過事件 （是指 當指針從外界往元素上移動時產生 ）
onMouseOut 鼠標離開事件 （是指鼠標從特定元素上離開時產生 ）
onLoad 載入事件 （當圖象或頁面結束載入時產生 ）
onUnload 卸載事件 （當訪問者離開頁面時產生 ）
onScroll 滾動條滾動事件 （當訪問者使用卷軸上移或下移時產生 ）
有了事件以後 我們就為事件加上動作 這裏只說改變當前元素自定義樣式的動作 我們可以用這個方法先設定好兩個自定義的CSS樣式 對象原先調用第壹種樣式 當產生鼠標事件時讓對象應用到第二種CSS樣式 而產生的鼠標效果 看下面這個例子
在網頁中插入壹個圖象 自定義壹個 out 樣式 用gray濾鏡使圖片變成黑白的
將這個自定義樣式應用到圖片上 在瀏覽器中預覽到圖片變成了黑白 我們再定義壹個樣式 over 這個樣式沒有任何內容 是空樣式 樣式表代碼如下
<style type= text/css >
<!
over {}
out {filter: Gray}
>
</style>
然後在圖片標記（IMG）裏加上 onMouseOver= this className= over onMouseOut= this className= out 意思為當鼠標經過時 圖片為over樣式 即彩色正常圖象 當鼠標離開時 圖片為out樣式 即黑白圖象 oMouseOver和onMouseOut是鼠標事件 this className= … 表示當前對象的class名為… 註意大小寫不要寫錯 JS對大小寫非常敏感
這樣這個效果就完成了 保存後在瀏覽器裏打開 圖象是黑白的 當鼠標移上去時 圖象變成彩色 鼠標離開時 圖象又變回黑白 只要發揮妳的想象 通過this className方法還可以做出很多好看的鼠標效果
lishixinzhi/Article/program/Java/JSP/201311/19145