CODEWITHSUNDEEP
htmlcssoperapseudo-class
Roman
Roman

Reputation: 2006

Opera and IE are not handling css pseudoclasses properly

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?

Demonstration:

<!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?

Upvotes: 0

Views: 190

Answers (2)

Jared Farrish
Jared Farrish

Reputation: 49198

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');
    });
});

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

Upvotes: 2

Mr Lister
Mr Lister

Reputation: 46559

CSS does not define which elements can be "active" and if a parent element of a clicked-on element also becomes "active".

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

So all browsers are behaving according to the specs. Sorry!

If you want a workaround, try using an <a> element instead of the outer <div>. Need more styling then though. And the inner <div> should be an inline element to make sure it remains valid HTML.
Edit: And the <a> also must have a href attribute, otherwise it still won't work in IE. (Can't test on Opera here.)

jsFiddle

Upvotes: 4

Related Questions