CSS與JavaScript結合起來產生的特效，進一步領略到CSS的強大功能。
動態改變樣式
我們先來看一個較簡單的特效，這裡只是用到了屬性和滑鼠事件。
我們使用“class”類屬性來改變文檔的樣式。
放大這段文本。
這個例子的代碼是這樣的：
| 代碼如下 | 複製代碼 |
| <html> <head> <title>change style</title> <style> <!-- .bigchange{color:blue;font-weight:bolder;font-size:225%; letter-spacing:4px;background:yellow;} //*定義bigchange類的字型的顏色、粗細、大小，字間距，背景色*// .start{color:yellow;background:navy;} //*定義start類的字型的顏色和背景色*// --> </style> </head> <body> <h1>動態改變樣式</h1> <p>請把滑鼠移到藍色背景的文字下面。</p> <p>我們使用"class"類屬性來改變文檔的樣式。 <span onmouseover="this.className='bigchange'" onmouseout="this.classname='start'" class="start" style="cursor:hand"> 放大這段文本。 </span> </p> </body> //*定義滑鼠觸發事件，當滑鼠放上去的時候，地區內以bigchange類的格式顯示， 當滑鼠離開的時候，以start類顯示*// </html> |
|
這個例子很簡單，容易理解，就不多說什麼了。
| 代碼如下 | 複製代碼 |
| <html> <head> <title>change style</title> <style> <!-- .bigchange{color:blue;font-weight:bolder;font-size:225%; letter-spacing:4px;background:yellow;} //*定義bigchange類的字型的顏色、粗細、大小，字間距，背景色*// .start{color:yellow;background:navy;} //*定義start類的字型的顏色和背景色*// --> </style> </head> <body> <span onmouseover="this.className='bigchange'" onmouseout="this.classname='start'" class="start" style="cursor:hand"> 放大這段文本。 </span> </p> </body> </html> |
|
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
