:HOVER 第一頁

:HOVER 1

: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>

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

使用 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>

HOVER（你正在看 第一頁）

:

第一頁

第二頁