style如何设置三个盒子点击后不同颜色的切换

你可以使用CSS的`:hover`伪类结合JavaScript或jQuery来实现这个效果。首先，在HTML中创建三个盒子：

<div class="box" id="box1">Box 1</div>
<div class="box" id="box2">Box 2</div>
<div class="box" id="box3">Box 3</div>

然后，为每个`.box`添加基础样式，并定义一个默认的颜色，比如初始颜色都是灰色：

.box {
  width: 100px;
  height: 100px;
  background-color: gray;
  color: white;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

接下来，使用JavaScript或jQuery监听每个盒子的鼠标悬停事件，改变背景颜色：

$(document).ready(function() {
  // 使用jQuery
  $('.box').click(function() {
    $(this).toggleClass('active');
  });

  // 或者使用纯JavaScript
  document.querySelectorAll('.box').forEach(function(box) {
    box.addEventListener('click', function() {
      this.classList.toggle('active');
    });
  });

  /* CSS for the :hover and active states */
  .box:hover,
  .box.active {
    background-color: /* 选择你需要的不同颜色 */;
  }
});

在这个例子中，当你点击任一盒子时，它会切换到另一个预设的颜色，如果没有特别指定，可以更改`.box.active`下的颜色。同时，我们还添加了一个过渡动画(`transition`)使得颜色变化平滑。