SO - 15516102

by CR47

HTML

<a href="#" class="panel">
    <div class="circle skinCare multi" style="top:10px;left:265px" id="acne">
        <div class="acne inner_circle">
            ACNE/</br>BLEMISHES
        </div>
    </div>
</a>
<a href="#" class="panel">
    <div class="circle skinCare multi" style="top:255px;left:10px" id="dry_skin">
        <div class="dry_skin inner_circle">
            DRY SKIN
        </div>
    </div>
</a>
<a href="#" class="panel">
    <div class="circle skinCare multi" style="top:90px;left:100px" id="oily_skin">
        <div class="oily_skin inner_circle">
            OILY SKIN/LARGE PORES
        </div>
    </div>
</a>
<a href="#" class="panel">
    <div class="circle skinCare multi" style="top:90px;left:430px" id="aging">
        <div class="aging inner_circle">
            WRINKLES/</br>AGING
    </div>
</div>
</a>
<a href="#" class="panel">
    <div class="circle skinCare multi" style="top:255px;left:510px" id="irritation">
        <div class="irritation inner_circle">
            SENSATIVE SKIN/IRRITATION
        </div>
    </div>
</a>
<a href="#" class="panel">
    <div class="circle skinCare multi" style="top:430px;left:100px" id="dark_spots">
        <div class="dark_spots inner_circle">
            DARK SPOTS
        </div>
    </div>
</a>

CSS

.circle {
    background-color:#2185C5;
    border-radius:50%;
    height:150px;
    line-height:20px;
    width:150px;
    position:absolute;
    margin:10px;
    text-align:center;
    color:white;
}
.inner_circle {
    height: 120px;
    width: 120px;
    margin: 0 auto;
    text-align: center;
    padding-top: 40px;
    text-decoration: none;
}
.circle a {
    text-decoration:none;
}
.selected {
    background-color:#FF421C;
}
.clear {
    clear:both;
}
.hover {
    background-color:#FF7F66;
    border:5px solid #E3310E;
}

JavaScript

var skinCare=[];
$('.skinCare').click(function(){
    var value = event.target.className.split(" ")[0];
    var index = skinCare.indexOf(value); 
    if($(this).hasClass('selected')){
        //$('.skinCare').removeClass('selected');
        skinCare.splice(index, 1);
    } else if($.inArray(value, skinCare) == -1){
        skinCare.push(value);
    }
});

$('html').click(function(){
    alert(skinCare);
    
});



$('.circle').mouseover(function(){
    	$(this).addClass('hover');
    });
        
    $('.circle').mouseout(function(){
    	$(this).removeClass('hover');
    });
    
    $('.multi').click(function(){
    	//$(this).css('background-color','#ff0000');
    	$(this).toggleClass('selected');
    	$(this).removeClass('hover');
});