Щелкающий перекрывающийся div (ы) и фокус

Question

У меня есть набор из нескольких кругов с различной непрозрачностью, каждый круг должен быть кликабельным, а при щелчке - в фокусе, и щелчок на нем будет стоять перед остальными.

просто вы говорите ...

Мой вопрос заключается в том, чтобы использовать CSS или Jquery и как достичь его

Пример:

.circles{} 
.round{opacity: 0.4;;width:75px;height:75px;border-radius: 50%; position: relative;} 
.circle1{background:#0f4977;top: 35px;left: 200px;z-index: 1;} 
.circle2{background:#f41875;top: 0px;left: 250px;z-index: 2;} 
.circle3{background:#6b259c;top: -50px;left: 205px;z-index: 3;}` 


$(".round").click(function() { //on click of any circle 
    $(this).css("z-index", "99"); 
    $(this).css("opacity", "1"); 
    $(this).siblings().css("opacity", "0.5"); 
    $(this).siblings().css("z-index", "5"); 
}); 

<div clas="circles"> 
     <div class="round circle1"></div> 
     <div class="round circle2"></div> 
     <div class="round circle3"></div> 
</div> 

Fiddle: https://jsfiddle.net/cLqqfh4v/8/

Answer 1

Как насчет чего-то е ...

$(".round").click(function() { //on click of any circle 
    $(this).css("z-index", "99"); //set this circle's z-index to 99, i.e. bringing it to the front 
    $(this).css("opacity", "1"); //Set its opacity to 1 (opaque) 
//Reset all other circles: 
    $(this).siblings().css("opacity", "0.5"); 
    $(this).siblings().css("z-index", "5"); 
}); 

Когда ваш HTML является:

<div class="round" id="circle1></div> 
<div class="round" id="circle2></div> 
<div class="round" id="circle3></div> 

Или что-то подобное; ваши круги просто должны иметь класс circle

См JSFiddle: https://jsfiddle.net/jofish999/somad48j/1/

Редактировать

---

Как отметил @Sai, более эффективным решением было бы иметь правило CSS для класса .opaque. Затем вместо использования jQuery для изменения CSS круга вы используете addClass(), чтобы дать ему этот класс, затем removeClass(), чтобы удалить его снова.

$(".round").click(function() { //on click of any circle 
    $(this).addClass("opaque"); 
    $(this).siblings().removeClass("opaque"); 

Где ваш CSS является:

.opaque {opacity:1; z-index:99;}