Saving the style of the elements of the hovering elements when you click on

Question

I create a selection panel, and it's hard for me to define it. There are nine mailboxes, and I want the user to click on the mailboxes and click so that the hover format is saved, and then ideally some kind of check box or something added to the window frame. I am completely unsure of how to make the "hang up" effect stay when I turn off the mouse.

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 supports the same css style on hover, and add this class to the element with a click or use toggleClass as shown below:

 $('.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> 

Answer 2

You can use the following example 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> 

Answer 3

You can create a class with the same style as the hover, and when you click on one window, you can add this class to the field.

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

and assign the class to the fields,

 $(document).on('click', 'project-option-boxes', function (e) { $(this).toggleClass('active'); }