What :active or :hover works?

Question

What is the behavior of :active and :hover when both are active on a element. I have written some code http://jsfiddle.net/z6v4r/ to demo this. Clearly :hover is the winner.

In another scenario (on which I was working on ) I wrote css for the following HTML:

<div class="abc">
    <div class="xyz">
        <input type="Something">
        </input>
    </div> 
</div>

CSS

div.abc div.xyz input:hover
{
border: 1px inset rgb(0, 69, 124);
    border-radius:15px;
    background-color: rgb(0, 69, 124);
    color:white;
}
div.abc div.xyz input:active,div.abc div.xyz input:focus
{
    border: 1px inset rgb(0, 69, 124);
    border-radius:15px;
    background-color:rgba(66, 87, 133, 0.24);
    outline-style:none;
}

Now the thing is on all these active I get the background color of the :active/:focus and the the color of font os coming from :hover .

I need the concept how these are applied to element.

Same Question: http://stackoverflow.com/questions/1677990/what-is-the-difference-between-focus-and-active — Farid Rn, Oct 04 '13 at 12:53
[Specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), [Inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/Inheritance). — robertc, Oct 04 '13 at 12:54

score 1 · Answer 1 · answered Oct 04 '13 at 12:53

Active is for the click event.

If you hold your mouse you can see your properties at work.

You can debug this in chrome using toggle element state enter image description here

This is useful for heavy processes like register or login when it takes time to get an answer from the server or be moved to a different page.

score 1 · Answer 2 · answered Oct 04 '13 at 13:03

1

This is because you are specifying the CSS for :hover firstly and then :active. CSS gives preferance to the Value which comes at last. So in your case, if you want to give more preferance to the :hover case write it later in the file.

answered Oct 04 '13 at 13:03

Ankit Berlia

13
3

is it? as they are different pseudo classes – mandeep Oct 04 '13 at 16:45
Yes they are different psedo classes but when both the classes are active the one which was specified later will work. – Ankit Berlia Oct 07 '13 at 11:29

What :active or :hover works?

2 Answers2