How to fix border color on mouse click

Question

I have one color box, so when I am hovering on the box the border color is getting appear. Now I want to click on the box then the border color should be remain as it is. It should not get remove when you will remove the mouse from box.

My Scss:

.fill-color1{
    background:$workspace-fill-color2;
    &:hover{
        border:2px solid $work-border-color2;
    }
}

$(`.fill-color${i}`).click(function () {
    $(this).css('border-color', 'red');
});

in the above code, after click the color is getting set but when I am removing the mouse from the box border is also getting remove.

Answer 1

$(".Element").on("click",function(){
$(this).removeClass("Element").addClass("Elementfocus");
});

div{
width:200px;
height:30px;
padding:10px;
}
.Element{
border:1px #E0E0E0 solid;
}
.Element:hover{
border:1px #e9e solid;
}
.Element:active{
border:2px blue solid;
}
.Elementfocus{
border:2px green solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Element">Hello!</div>