单击元素时父元素的活动状态答案

【问题标题】：Active state on parent element when clicking element单击元素时父元素的活动状态
【发布时间】：2012-04-29 17:21:48
【问题描述】：

我正在创建一个按钮（实际上只是一个链接），其设计相当复杂，并且由于我正在针对 IE8 进行优化，因此无法使用 CSS3 制作。因此，我在<a> 中放置了<span>，并在两者上放置了背景图片。

图像在:hover 和:active 上发生变化。它在所有浏览器中都非常好用，但在 IE 中则不然。 :hover 工作正常，但是当点击<span> 时，不会触发父<a> 的:active 状态。这有点道理，但我以前见过它有效，所以我想一定有一些解决方法？

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

【问题讨论】：

<a> with an inner <span> not triggering :active state in IE 8的可能重复

标签： html css

【解决方案1】：

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

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

这是一个 jsFiddle http://jsfiddle.net/ollie/r5NDw/1/

或者，您可以使用addClass();在点击时添加类

【讨论】：

嗯，是的，确实如此。当然，我必须在mousedown 和mouseup 上运行它，但问题仍然是按钮本身也被触发了。我也可以用 Javascript 做到这一点，但它会是太多的黑客攻击。无论如何，干杯。

【解决方案2】：

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

编辑

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

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

和 Css 样式...

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

【讨论】：