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

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

• javascript
• jquery
• html
• css

• jsfiddle – Juntra Commented Apr 25, 2014 at 16:16
• According to code you'll be having multiple IDs of same #profile, but remember IDs must be unique – Dhaval Marthak Commented Apr 25, 2014 at 16:18
• 1 when its active (green), I want to hover over it... it's a little confusing, when it's active, it means your mouse should be held down and maybe still hovers over the div. – King King Commented Apr 25, 2014 at 16:18
• meaning in active state its green. but when hover over it again it will turn black and by clicking it again it stays black. – Juntra Commented Apr 25, 2014 at 16:23
• 1 @KingKing I saw that later yes. I was too happy it worked! thanks! – Juntra Commented Apr 25, 2014 at 16:40

4 Answers 4

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

Simply add styling for the :hover state on the .active class (note that I'm using tomato instead of black as that's the colour you've used in your demo):

#profile.active:hover {
    background: tomato;
}

JSFiddle.

I'm not sure what you're wanting to achieve here though:

$('#profile').removeClass('active');
$(this).addClass('active');

If you're wanting the element to toggle on and off of .active with each click, you can simply:

$(this).toggleClass('active');

Lets say you have the following div

<div id="divSample"></div>

Then, you will need the following CSS:

#divSample {
    background-color:Black;
    height:300px;
    width:500px;
}
#divSample:hover {
    background-color:Green;
}

#divSample:active {
    background-color:Green;
}

You can see this here: http://jsfiddle.net/h4aVW/

Hope this helps!!!

Create a class .active containing the styling you want and add it to the div with jQuery.

The you can easily style your div in the two states.

.normal {background-color:black}
.normal:hover {background-color: green}
.active {background-color: green}
.active:hover {background-color: black}