2008/11/10

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

  • 執行結果:

    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(你正在看 第一頁) : 第一頁 第二頁