seo Question posted in
Some basic information to get you started with this can be found here.

Keeping elements' hover style active when clicked on – SEO

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>
Tags:

3

Answers


  1. 0

    You can use the following example by using JQuery and using .hover and .addClass():

    $(".project-option-boxes").hover(function()
{
  $(this).addClass("active");
});
    #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;
}

.active {
  background: #45ba95;
  color: white;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    You can create a class with the same style as the hover, and when one box is clicked, you can add this class to the box.

    .project-option-boxes.active {
  background-color: #45ba95;
  color: #FFF;
}

    and to give the class to the boxes,

    $(document).on('click', 'project-option-boxes', function (e) {
  $(this).toggleClass('active');
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search