Utrzymywanie aktywnego stylu elementów po kliknięciu na

Question

Tworzę panel selekcyjny i mam problem z wymyśleniem jakiegoś aspektu. Jest dziewięć pudełek i chcę, aby użytkownik mógł je kliknąć, a po kliknięciu na format aktywatora pozostawał obecny, a następnie idealnie zaznaczony znacznik lub coś dodanego do ramki. Nie jestem całkowicie pewny, jak uzyskać efekt fontu najeżdżania, pozostający po wyłączeniu myszy.

Czy ktoś wie, jak mogę to zrobić?

#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

Tworzenie inną nazwę klasy, które posiadają ten sam css styl po najechaniu i dodaj te klasa do klikniętego elementu lub użyć toggleClass jak poniższy przykład:

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

Można użyć następujący przykład za pomocą JQuery i korzystania .hover i .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

Można utworzyć klasę z tym samym stylu co zawisu, a gdy jeden pojemnik zostanie kliknięty, można dodać tę klasę pudełko.

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

i dać klasę do pudełek,