How to give a div a hover and active state on click

css, html, javascript, jquery

Solution

You can do it without jQuery in pure CSS. Give your DIV a tabIndex so it can receive focus:

<div id="profile" tabindex="0"></div>

And add `:focus` class selection:

#profile:hover, #profile:focus{
    background: green;    
}

Demo: http://jsfiddle.net/AfR49/10/

This way the color "stick" after the click. (If I understood your requirement correctly). If you click elsewhere - color returns to the original

Problem

i've got a div which is black, when I hover over it, it turns green. when clicked, I want it to stay green also. normale state: black hover state: green active state: green and when its active `(green)`, I want to hover over it which makes the div black again. i can't seem to get this active state work and in reverse. thanks in advance! Here is my fiddle: Link

Original source