将鼠标悬停在对象上以转换另一个对象

Question

我在HTML中有两个圆圈（div）。如何使用CSS3中的过渡点击一个圆圈来变换另一个圆圈（比如更改其不透明度：0.5;）

谢谢

Answer 1

如果您想使用jQuery，可以执行以下操作：

  //select circle1 and do something when it's clicked
  $('.circle1').click(function() {

    //when circle1 clicked, do something to circle2
  $('.circle2').css('opacity', '.5');

 });

Answer 2

使用“+”选择器

<div>
    <div class="circle1"></div>
    <div class="circle2"></div>
</div>

这个css会让你想做什么

.circle2{
    transition: opacity 1s;
}
.circle1:hover + .circle2{
    opacity: 0.5;
}

如果要在单击circle1

时更改不透明度，请使用jQuery