代码之家  ›  专栏  ›  技术社区  ›  rahim asgari

如何使主动状态在IE中起作用?

  •  8
  • rahim asgari  · 技术社区  · 14 年前

    :active 国家。

    这是我的代码:

    <button class='button'>Click Me</button>
    

    CSS:

    .button {
        width: 118px;
        height: 33px;
        background: url(/images/admin/btn.png) no-repeat center top;
        border: none;
        outline: none;
    }
    .button:active {
        background-position: center bottom;
    }
    
    1 回复  |  直到 14 年前
        1
  •  10
  •   Ben Lee    14 年前

    这是IE早期版本中的已知错误(我认为他们在IE8中解决了这个问题)。我通常用javascript解决这个问题(以及相应的“悬停”问题)。我将两个事件处理程序附加到元素--“mousedown”来设置一个附加类(类似于“button active”)和“mouseup”来删除该类。在jQuery中应该是这样的:

    $('.button').mousedown(function() { $(this).addClass('button-active'); });
    $('.button').mouseup(function() { $(this).removeClass('button-active'); });
    

    然后,将该类添加到css规则中,如下所示:

    .button:active, .button-active {
        background-position: center bottom;
    }
    

    有点难看,是的,但是你想知道什么——是Internet Explorer。不可能很漂亮。