过渡设置

通过设置伪类的悬停可以在光标移到按钮上时更改按钮的颜色。 当光标悬停在按钮上时，你可以看到颜色。你可以通过使用过渡慢慢改变按钮的颜色。下面通过设置duration-1000，颜色会在1秒内缓慢变化。持续时间的多个值从duration-75 到duration-1000 注册。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded hover:bg-red-700 duration-1000">前端晚间课</button>

变换设置

如果你想让按钮本身变大并通过悬停更改按钮的颜色，您可以使用transform 和scaling 的Utilize Class来实现。

<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded transform hover:scale-110 hover:bg-red-700 duration-1000">前端晚间课</button>

群组设置

到目前为止的hover设置中，当光标经过目标元素时，hover的变化就会发生在元素上，但是在group设置中，当光标经过父元素时，设置hover的子元素中就可以呈现hover效果。

在下面的示例中，当光标经过设置了 group 的父元素时，由于为子元素设置的悬停设置，一个 p 标签元素的文本颜色变为红色，另一个变为蓝色。

<div class="group m-10 p-10 border hover:bg-gray-100">
  <p class="font-black group-hover:text-red-900">前端晚间课</p>
  <p class="font-black group-hover:text-blue-900">前端晚间课</p>
</div>
复制代码

动画设置

只需将 animate-bounce 和 animate-pulse 设置为 class，您就可以轻松设置动画，而无需设置复杂的 CSS。