Background change in div - html

Question

I want to have the background color stay after I click on the div.
This div is linked to target another div.
<div class="barbutton">ABOUT</div>
here is the CSS of the div i click on
.barbutton:hover {
background-color: #7BDFBE;
}
so I want the background color to stay when its clicked.

Answer 1

I think what you're trying to achieve is the normal link behaviour i.e. it changes colour and stays that way to indicate it has already been visited. If yes, then you're approaching the problem the wrong way in CSS.
Instead of putting the CSS on a new DIV inside the <a> tag put the CSS on the link itself.
<a class="barbutton" href="#aboutbody">ABOUT</a>
Then use the link states in CSS as below:
a.barbutton:visited {
background-color: #7BDFBE;
}
a.barbutton:hover {
background-color: #7BDFBE;
}
Similarly, add the other links states you require.

Answer 2

To maintain state like you are wanting, I would suggest using some javascript/jQuery.
Javascript:
<div id="barbuttonid" class="barbutton">ABOUT</div>
<script type="text/javascript">
document.getElementById("barbuttonid").onclick = function() {
document.getElementById("barbuttonid").className += " clicked";
};
</script>
jQuery:
<div class="barbutton">ABOUT</div>
<script type="text/javascript">
jQuery('.barbutton').click(function() { jQuery(this).addClass('clicked'); });
</script>
CSS:
/* anchor tags are inline and cannot contain blocks elements like divs */
#aboutbody {
display: inline-block;
}
.barbutton:hover {
background-color: #7BDFBE;
}
.barbutton.clicked {
background-color: #7BDFBE;
}
Now when it is clicked, the additional class will be added and the CSS style can make the background persist for you.
EDIT/NOTE:
Ravi's answer is better as it does not use javascript. If you kept the HTML layout as you have it, the CSS declarations would have to be:
a:hover .barbutton {...}
a:vistied .barbutton {...}
Also, this way will make the style persist as long as the browser remembers that the link has been visited (user comes back in 3 days and the background color may still be persistant). My way above will not keep the background as soon as the user refreshes or leaves the page. I guess it depends on what you are going for.