可点击的重叠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>

小提琴：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 所述，更有效的解决方案是为类.opaque设置CSS规则。然后，不是使用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;}