Problem is very very simple: When clicking on "red red red" in browsers: Chrome 17, FireFox 10, IE 9, Opera 11.61 both elements have been lightened with their appropriate colors.
When clicking on "GREEN" it happens only in Chrome and FF. In IE and OPERA nothing happens. Why?
<!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>
Does anyone know any workarounds?
I believe you need to use Javascript to handle this, as CSS is not capable of selecting parent elements.
In jQuery:
$(document).ready(function(){
$('.container .in').mousein(function(){
$(this).addClass('container_active');
}).mouseout(function(){
$(this).removeClass('container_active');
});
});