Активное состояние на родительском элементе при нажатии элемента

Question

Я создаю кнопку (на самом деле только ссылку), конструкция которой довольно сложна, и, поскольку я оптимизирую для IE8, нельзя сделать с CSS3. Поэтому я разместил <span> внутри <a> и разместил фоновое изображение на обоих.

Изображение меняется на :hover и :active. Он отлично работает во всех браузерах, но не в IE. :hover работает нормально, но при нажатии на <span> состояние родителя <a> не запускается. Это имеет смысл, но я видел, как это работает раньше, поэтому я предполагаю, что должно быть какое-то обходное решение?

Вот скрипка: http://jsfiddle.net/TheNix/EtjL3/

Answer 1

Вы можете установить css class для активного состояния с использованием jquery или javascript.

Редактировать

Вы можете установить класс 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; } ​ 

Answer 2

Вы можете попробовать использовать следующий JQuery для добавьте css inline при щелчке.

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

Вот jsFiddle для него http://jsfiddle.net/ollie/r5NDw/1/

в качестве альтернативы вы можете добавлять классы по щелчку с помощью addClass();