Keeping elements' hover style active when clicked on

Question

I am making a selection panel and I am having a hard time figuring out an aspect to it. There are nine boxes and I want the user to be able to click the boxes and when clicked for the hover's format to stay present and then ideally some sort of checkmark or something added into the border of the box. I am completely unsure of how to get the boxes' hover font effect to stay when I take the mouse off.

Does anyone know how I can do this?

#project-scope-container {
	margin-top: 70px;
	margin-left: 9%;
	width: 75%;
	height: 300px;
}
#project-scope-title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 15px;
}
.project-option-boxes {
	display: inline-block;
	border: 1px solid #45ba95;
	padding: 20px 0px;
	margin: 12px 20px 12px 0px;
	width: 30%;
	text-align: center;
	font-size: 1.2em;
	color: #45ba95;
	cursor: pointer;
}
.project-option-boxes:hover {
	background-color: #45ba95;
	color: #FFF;
}

<div id="project-scope-container">
		<div id="project-scope-title">PROJECT SCOPE</div>
		<div class="project-option-boxes">BRANDING & IDENTITY</div>
		<div class="project-option-boxes">WEB DESIGN</div>
		<div class="project-option-boxes">RESPONSIVE/MOBILE</div>
		<div class="project-option-boxes">MARKETING ASSETS</div>
		<div class="project-option-boxes">HTML5 ANIMATION</div>
		<div class="project-option-boxes">SEO OPTIMIZATION</div>
		<div class="project-option-boxes">MONTHLY SUPPORT</div>
		<div class="project-option-boxes">WEB DEVELOPMENT</div>
		<div class="project-option-boxes">ECOMMERCE</div>
	</div>

Answer 1

Create another class name that hold the same css style when hovering, and add those class into clicked element or use toggleClass like following example :

$('.project-option-boxes').click(function() {
  $(this).hide().toggleClass('box_focused').fadeIn('slow');
});

#project-scope-container {
  margin-top: 70px;
  margin-left: 9%;
  width: 75%;
  height: 300px;
}
#project-scope-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
}
.project-option-boxes {
  display: inline-block;
  border: 1px solid #45ba95;
  padding: 20px 0px;
  margin: 12px 20px 12px 0px;
  width: 30%;
  text-align: center;
  font-size: 1.2em;
  color: #45ba95;
  cursor: pointer;
}
.project-option-boxes:hover {
  background-color: #45ba95;
  color: #FFF;
}
.box_focused {
  background-color: #45ba95;
  background-image : url("http://findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png");
  background-position: right top;
  background-repeat: no-repeat;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="project-scope-container">
  <div id="project-scope-title">PROJECT SCOPE</div>
  <div class="project-option-boxes">BRANDING & IDENTITY</div>
  <div class="project-option-boxes">WEB DESIGN</div>
  <div class="project-option-boxes">RESPONSIVE/MOBILE</div>
  <div class="project-option-boxes">MARKETING ASSETS</div>
  <div class="project-option-boxes">HTML5 ANIMATION</div>
  <div class="project-option-boxes">SEO OPTIMIZATION</div>
  <div class="project-option-boxes">MONTHLY SUPPORT</div>
  <div class="project-option-boxes">WEB DEVELOPMENT</div>
  <div class="project-option-boxes">ECOMMERCE</div>
</div>