Opera и IE неправильно обрабатывают псевдоклассы CSS - PullRequest
Новая
       7

Opera и IE неправильно обрабатывают псевдоклассы CSS

0 голосов
/ 02 марта 2012

Проблема очень очень проста: при нажатии на «красный красный красный» в браузерах: Chrome 17, FireFox 10, IE 9, Opera 11.61 оба элемента были подсвечены соответствующими цветами.

При нажатии на«ЗЕЛЕНЫЙ» бывает только в Chrome и FF.В IE и OPERA ничего не происходит.Почему?

Демонстрация : 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.container:active
{
    background: red;
}
.container:active .in
{
    background: green;
}
</style>
</head>
<body>
    <div class="container">
        red<br />red<br />red<br />red<br />red<br />
        <div class="in">GREEN</div>
    </div>
</body>
</html>

Кто-нибудь знает какие-нибудь обходные пути?

Ответы [ 2 ]

4 голосов
/ 02 марта 2012

CSS не определяет, какие элементы могут быть «активными», и если родительский элемент элемента, по которому щелкнули, также становится «активным».ведение себя в соответствии со спецификациями.Извините!

Если вы хотите обойти эту проблему, попробуйте использовать элемент <a> вместо внешнего <div>.Нужно больше стиля тогда.И внутренний <div> должен быть встроенным элементом, чтобы убедиться, что он остается действительным HTML.
Редактировать: И <a> также должен иметь атрибут href, иначе он все равно не будет работать в IE.(Не могу проверить Opera здесь.)

jsFiddle

2 голосов
/ 02 марта 2012

Я считаю, что для этого вам нужно использовать Javascript, поскольку CSS не способен выбирать родительские элементы.

В jQuery: 

$(document).ready(function(){
    $('.container .in').mousein(function(){
        $(this).addClass('container_active');
    }).mouseout(function(){
        $(this).removeClass('container_active');
    });
});

http://jsfiddle.net/uYfna/8/

...