クリックしたときに要素のホバースタイルを有効にする

Question

選択パネルを作成していて、面倒を見ています。 9つのボックスがあり、ユーザがボックスをクリックできるようにし、ホバーのフォーマットをクリックして現在の状態にし、理想的にはチェックマークなどをボックスの境界線に追加するようにします。私は、マウスを離したときにボックスのホバーフォント効果を維持する方法を完全にはわかりません。

どのように私はこれを行うことができます知っていますか？

#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

を同じCSSを保持する別のクラス名を作成します。ホバリング時のスタイルあなたがホバーと同じスタイルを持つクラスを作成することができ、1つのボックスがクリックされた場合、あなたはこのクラスを追加することができます

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

あなたはjQueryのを使用して.hoverと.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

次の例のようにtoggleClassをクリックした要素にクラスまたは使用ボックス。

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

と、そのクラスがアクティブであるとき、私は箱の内側に画像を追加することができますどのように、箱に