:HOVER 是 準類別 中的動態準類別,當滑鼠指標指著一個元素,但尚未啟用這個元素時,會採用此設計的風格。
- 風格用法:
<style type='text/css'>
.hvr:hover {background:green;
color: red;
font-size: 120%;
width: 300px;
}
</style>
BUTTON <button class=hvr>滑鼠移過來</button><br /><br />
INPUT <input class=hvr value='滑鼠移過來' /><br /><br />
RADIO <input class=hvr type=radio /><br /><br />
<div class=hvr>DIV 滑鼠移過來</div>
<p class=hvr>P 滑鼠移過來</p>
<span class=hvr>SPAN 滑鼠移過來</span> - 執行結果:
BUTTON
INPUT
RADIO
DIV 滑鼠移過來P 滑鼠移過來
SPAN 滑鼠移過來
使用 javascript 模擬 :hover。由於 IE6 沒有 :hover,所以用 onmouseover, onmouseout 模擬。
- 風格用法:
<style type='text/css'>
.hov {background:blue;
color: red;
font-size: 120%;
width: 300px;
}
</style>
BUTTON <button onmouseover='this.className="hov"'
onmouseout='this.className=""'>滑鼠移過來</button><br /><br />
INPUT <input onmouseover='this.className="hov"'
onmouseout='this.className=""' value='滑鼠移過來' /><br /><br />
RADIO <input onmouseover='this.className="hov"'
onmouseout='this.className=""' type=radio /><br /><br />
<div onmouseover='this.className="hov"'
onmouseout='this.className=""'>DIV 滑鼠移過來</div>
<p onmouseover='this.className="hov"'
onmouseout='this.className=""'>P 滑鼠移過來</p>
<span onmouseover='this.className="hov"'
onmouseout='this.className=""'>SPAN 滑鼠移過來</span> - 執行結果:
BUTTON
INPUT
RADIO
DIV 滑鼠移過來P 滑鼠移過來
SPAN 滑鼠移過來
HOVER(你正在看 第一頁) | : | 第一頁 | 第二頁 |