在HTML中设置多个悬停效果可以让我们的网页更加生动有趣，下面我们来介绍怎样做。

  /*第一个悬停效果*/
  .hover-effect1:hover {
    color: red;
  }

  /*第二个悬停效果*/
  .hover-effect2:hover {
    background-color: yellow;
  }

  /*第三个悬停效果*/
  .hover-effect3:hover {
    transform: scale(1.2);
  }

在上面的代码中，我们定义了三个不同的悬停效果。

第一个悬停效果是当鼠标悬停在class为hover-effect1的元素上时，改变文字颜色为红色。

第二个悬停效果是当鼠标悬停在class为hover-effect2的元素上时，改变背景颜色为黄色。

第三个悬停效果是当鼠标悬停在class为hover-effect3的元素上时，对元素进行缩放。

通过这些悬停效果，可以让网页更具有吸引力。