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