當一個元素被用戶的滑鼠 點選啟用,會應用此設計的風格。有些瀏覽器會在元素失焦後,才取消這個風格。
- 風格用法:
<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> - 執行結果:
BUTTON
INPUT
RADIO
DIV 滑鼠點擊此P 滑鼠點擊此
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> - 執行結果:
BUTTON
INPUT
RADIO
DIV 滑鼠點擊此P 滑鼠點擊此
SPAN 滑鼠點擊此
:ACTIVE(你正在看 第一頁) | : | 第一頁 | 第二頁 |