CODEWITHSUNDEEP
csscss-selectorshover
Juan Lie
Juan Lie

Reputation: 145

How to solving : CSS selector “:active” not working?

I'm very confused, because :hover selector was working normaly, but :active not working.

scenario:

first : sample.com/game when click link box game of different ID (ex: ID 1-101) with every box use css

#selec{background-color:white;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;}

when click one of box ID go to sample.com/game?id=100

I was successfully for hover

#selec:hover{background-color:blue;}

but i want to active with color background, when box is active (box ID 100 with red background and other still white because box 100 was active)

#selec:active{background-color:blue;}

But didn't successfull, WHY????? I still confused for this.

This php file:

<a href="?game=<?php echo $ID;?>"><div id="selec"><div class="text"><p><?php echo $text; ?></p></div></div></a>

Anyone help me to solveing this? thanks *$text for give name in box for example box ID 100 is Game RPG

Upvotes: 1

Views: 10286

Answers (1)

scunliffe
scunliffe

Reputation: 63580

The :active CSS pseudo class works on all elements... however it only works on links (e.g. <a> elements) if you are not rendering in Standards Mode in Internet Explorer.

thus it won't work on your <div> in IE, if you don't have a DOCTYPE set.

Add this to the top of your HTML:

<!doctype html>

The order that each pseudo class is defined matters too... (to ensure they all "override" the previous)... just remember that:

"Lord Vadar's Handle Formerly Anakin"

a:link    {color:blue;}
a:visited {color:green;}
a:hover   {color:red;}
a:focus   {color:orange;}
a:active  {color:yellow;}

Note: Thanks to @BoltClock for indicating the error on the W3Schools site here http://www.w3schools.com/cssref/sel_active.asp that indicates it is only available on links. (This is no longer correct in modern browsers (rendering in standards mode))

Note 2: W3C indicates that :active pseudo class was added to all elements in CSS 2.1, it was only on links in CSS 1.0: "Note. Also note that in CSS1, the ':active' pseudo-class only applied to links." http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

Upvotes: 9

Related Questions