2009/03/16

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

  • 執行結果:

    BUTTON

    INPUT

    RADIO

    DIV 滑鼠移過來

    P 滑鼠移過來

    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>

  • 執行結果:

    BUTTON

    INPUT

    RADIO

    DIV 滑鼠移過來

    P 滑鼠移過來

    SPAN 滑鼠移過來
HOVER(你正在看 第一頁) : 第一頁 第二頁