Question

问题非常简单：在浏览器中点击“红色红色”时：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>

有没有人知道任何变通办法？

Answer 1

CSS没有定义哪些元素可以“活动”，并且单击元素的父元素也变为“活动”。

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

因此所有浏览器都按照规范行事。遗憾！

如果您想要解决方法，请尝试使用<a>元素而不是外部<div>。然而，需要更多的造型。内部<div>应该是内联元素，以确保它仍然是有效的HTML 编辑：<a>也必须具有href属性，否则它仍然无法在IE中使用。（不能在这里测试Opera。）

jsFiddle

Answer 2

我相信您需要使用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/

Opera和IE没有正确处理css伪类

2 个答案: