利用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=thisclassName=over onMouseOut=thisclassName=out意思為當鼠標經過時圖片為over樣式即彩色正常圖象當鼠標離開時圖片為out樣式即黑白圖象oMouseOver和onMouseOut是鼠標事件thisclassName=…表示當前對象的class名為…注意大小寫不要寫錯JS對大小寫非常敏感
這樣這個效果就完成了保存後在浏覽器裡打開圖象是黑白的當鼠標移上去時圖象變成彩色鼠標離開時圖象又變回黑白只要發揮你的想象通過thisclassName方法還可以做出很多好看的鼠標效果
到這裡所有教程的內容就都講完了希望大家在學習中能靈活運用屬性及方法深刻理解規律和概念
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19145.html
