单击元素时父元素上的活动状态

Question

我正在创建一个按钮（实际上只是一个链接），这个设计相当复杂，而且我正在优化IE8，不能用CSS3制作。因此，我在<span>内放置了<a>，并在两者上放置了背景图片。

:hover和:active上的图片发生了变化。它在所有浏览器中都非常好用，但在IE中并不是那么多。 :hover工作正常，但点击<span>时，不会触发父:active的{​​{1}}状态。这有点意义，但我之前看到它有用，所以我想必须有一些解决方法吗？

这是一个小提琴：http://jsfiddle.net/TheNix/EtjL3/

Answer 1

您可以尝试使用以下jQuery在点击时添加内联css。

              $("a, span").click(function(){
                  $(this).css("background", "green")
                  $(this).find("span").css("background", "lime")    
              });

这是jsFiddle for it http://jsfiddle.net/ollie/r5NDw/1/

或者，您可以使用addClass();

在点击时添加课程

Answer 2

您可以使用css class或jquery为有效状态设置javascript。

修改

您可以像这样设置一个css类......

$(document).ready(function() {
    $("a span").click(function() {
      $(this).addClass("active");
      $(this).parent().addClass("active");
    });     
});

和Css Style ......

a.active { background:green; }
a.active span { background:lime; } ​