可点击的重叠 div(s) 和焦点

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>

或类似的东西；你的圈子只需要 class circle

参见 JSFiddle：https://jsfiddle.net/jofish999/somad48j/1/

编辑

如 @Sai 所述，更有效的解决方案是为 class [=15= 设置 CSS 规则].然后，不是使用 jQuery 更改圆的 CSS，而是使用 addClass() 将其赋予 class，然后 removeClass() 再次将其删除。

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

你的CSS在哪里：

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

可点击的重叠 div(s) 和焦点

Clickable overlapping div(s) and focus

html

css

overlap

opacity

编辑