Halte den Hover-Stil der Elemente aktiv, wenn er angeklickt wird

Question

Ich mache ein Auswahl-Panel und es fällt mir schwer, einen Aspekt herauszufinden. Es gibt neun Felder, und ich möchte, dass der Benutzer in der Lage ist, auf die Felder zu klicken, und wenn er angeklickt wird, um das Hover-Format beizubehalten, und dann idealerweise eine Art Häkchen oder etwas hinzugefügt am Rand der Box. Ich bin mir völlig unsicher, wie ich den Hover-Font-Effekt der Boxen erhalten kann, wenn ich die Maus aushalte.

Weiß jemand, wie ich das tun kann?

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

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

Answer 1

Erstellen Sie einen anderen Klassennamen, die die gleiche CSS halten Stil beim Schweben, und fügen Sie diese hinzu oder Klasse in geklickt Element verwendet toggleClass wie folgendes Beispiel:

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

können Sie das folgende Beispiel verwenden von JQuery und unter Verwendung von .hover und .addClass():

$(".project-option-boxes").hover(function() 
 
{ 
 
    $(this).addClass("active"); 
 
});

#project-scope-container { 
 
\t margin-top: 70px; 
 
\t margin-left: 9%; 
 
\t width: 75%; 
 
\t height: 300px; 
 
} 
 
#project-scope-title { 
 
\t font-size: 1.2em; 
 
\t font-weight: bold; 
 
\t margin-bottom: 15px; 
 
} 
 
.project-option-boxes { 
 
\t display: inline-block; 
 
\t border: 1px solid #45ba95; 
 
\t padding: 20px 0px; 
 
\t margin: 12px 20px 12px 0px; 
 
\t width: 30%; 
 
\t text-align: center; 
 
\t font-size: 1.2em; 
 
\t color: #45ba95; 
 
\t cursor: pointer; 
 
} 
 
.project-option-boxes:hover { 
 
\t background-color: #45ba95; 
 
\t 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"> 
 
\t \t <div id="project-scope-title">PROJECT SCOPE</div> 
 
\t \t <div class="project-option-boxes">BRANDING & IDENTITY</div> 
 
\t \t <div class="project-option-boxes">WEB DESIGN</div> 
 
\t \t <div class="project-option-boxes">RESPONSIVE/MOBILE</div> 
 
\t \t <div class="project-option-boxes">MARKETING ASSETS</div> 
 
\t \t <div class="project-option-boxes">HTML5 ANIMATION</div> 
 
\t \t <div class="project-option-boxes">SEO OPTIMIZATION</div> 
 
\t \t <div class="project-option-boxes">MONTHLY SUPPORT</div> 
 
\t \t <div class="project-option-boxes">WEB DEVELOPMENT</div> 
 
\t \t <div class="project-option-boxes">ECOMMERCE</div> 
 
\t </div>

Answer 3

Sie können eine Klasse mit dem gleichen Stil wie das Schweben erstellen, und wenn ein Kästchen angeklickt wird, können Sie diese Klasse in der die Kiste.

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

und die Klasse zu den Boxen zu geben,