hover on everything but only onclick

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="choose-format-block">
                 <h3>kies je formaat</h3>

                <div class="col-md-2 col-sm-6 format-area"> <a href="#">
                                        <div><img src="images/flyer-formaat-A3.gif" alt="" /></div>
                                        <span class="sort">A3</span>
                                        <span class="dimension">297 x 420 mm</span>
                                    </a>

                </div>
                <div class="col-md-2 col-sm-6 format-area"> <a href="#">
                                        <div><img src="images/flyer-formaat-A4.gif" alt="" /></div>
                                        <span class="sort">A4</span>
                                        <span class="dimension">210 x 297 mm</span>
                                    </a>

                </div>
                <div class="col-md-2 col-sm-6 format-area"> <a href="#">
                                        <div><img src="images/flyer-formaat-A5Large.gif" alt="" /></div>
                                        <span class="sort">A5</span>
                                        <span class="dimension">148 x 210 mm</span>
                                    </a>

                </div>
                <div class="col-md-2 col-sm-6 format-area"> <a href="#">
                                        <div><img src="images/flyer-formaat-A6.gif" alt="" /></div>
                                        <span class="sort">A5 Large</span>
                                        <span class="dimension">105 x 297 mm</span>
                                    </a>

                </div>
                <div class="col-md-2 col-sm-6 format-area"> <a href="#">
                                        <div><img...

CSS

.choose-format-block .format-area {
    border: 1px solid #b6b4b5;
    height: 180px;
    margin: 0 10px 20px;
    text-align: center;
    width: 100px;
}
.choose-format-block .format-area a {
    color:#000000;
}
.choose-format-block .format-area a div {
    padding: 23px 0 10px;
}
.choose-format-block .format-area .sort {
    float: left;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    width: 100%;
}

.format-area
{
    position: relative;
    z-index: 1;
}

.format-area.selected
{
    z-index: 3;
}

#ui-blocker
{
    background-color: rgba(255,255,255,0.75);
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index: 2;
    display: none;
}

JavaScript

$(function(){
    var $uiBlocker = $("#ui-blocker");
    $(".choose-format-block").on("click","a",function(){
        $uiBlocker.fadeIn("fast");
        $(this).closest(".format-area").addClass("selected");
    });
    
    $uiBlocker.click(function(){
        $(this).fadeOut("fast");
        $(".format-area.selected").removeClass("selected");
    });
});