:ACTIVE, :FOCUS, :HOVER, :LANG, :LINK, :VISITED

準類別 | :ACTIVE | :FOCUS | :HOVER | :LANG() | :LINK | :VISITED

:ACTIVE 1

當一個元素被用戶的滑鼠 點選啟用，會應用此設計的風格。有些瀏覽器會在元素失焦後，才取消這個風格。 <style type='text/css'> .act:active {background:green; color: red; font-size: 120%; width: 300px } </style> BUTTON <button class=act>滑鼠點擊此</button><br /><br /> INPUT <input class=act value='滑鼠點擊此' /><br /><br /> RADIO <input class=act type=radio /><br /><br /> <div class=act>DIV 滑鼠點擊此</div> <p class=act>P 滑鼠點擊此</p> <span class=act>SPAN 滑鼠點擊此</span>

• IE6 失敗；IE8, Firefox3.0, Safari, Chrome 都成功。IE6 只能在超連結元素 Anchor 使用 :active，參見後面的範例。

使用 javascript 模擬 :active。由於 IE6 沒有 :active，所以用 onmousedown, onmouseup 模擬。 <style type='text/css'> .atv {background:blue; color: red; font-size: 120%; width: 300px } </style> BUTTON <button onmousedown='this.className="atv"' onmouseup='this.className=""'>滑鼠點擊此</button><br /><br /> INPUT <input onmousedown='this.className="atv"' onmouseup='this.className=""' value='滑鼠點擊此' /><br /><br /> RADIO <input onmousedown='this.className="atv"' onmouseup='this.className=""' type=radio /><br /><br /> <div onmousedown='this.className="atv"' onmouseup='this.className=""'>DIV 滑鼠點擊此</div> <p onmousedown='this.className="atv"' onmouseup='this.className=""'>P 滑鼠點擊此</p> <span onmousedown='this.className="atv"' onmouseup='this.className=""'>SPAN 滑鼠點擊此</span>

:ACTIVE（你正在看 第一頁）

:

第一頁

第二頁