當我使用tailwind css將鼠標懸停在圖像上時，我應該使用什么類來改變圖像？ 使用普通的CSS，我可以給圖片分配一個類

.class:hover{ background:url("....jpg");}

改變，但我無法在順風中找到替代方案。

我做了這個，把圖像傳入一個變量，像這樣導入，之后，就把圖像的變量傳入src。

import FinantoLogo from '../static/images/FinantoLogo.png'
    import teste from '../static/images/test.jpg'
    
 

<div class="flex flex-wrap mt-24">
  <div class="w-1/2 ml-16">
    <div class="mx-auto w-24 h-32 rounded-full ml-auto">
      <div class="relative">
        <img src={finantoPerfil} class="rounded-full transition-transform duration-300 transform hover:scale-110" alt="Imagem de perfil" />
        <img src={teste} class="rounded-full absolute top-0 left-0 opacity-0 transition-opacity duration-300 transform hover:opacity-100" alt="Nova imagem" />
      </div>
    </div>
  </div>
</div>

順風中有一個特殊的懸停修改器，可以應用于所有的工具。看看這里的文件:https://tailwindcss.com/docs/hover-focus-and-other-states

這里有一個簡單的例子:

<div class="bg-foo hover:bg-bar">
  Hover me to change img
</div>

.bg-foo {
  background:url("foo.jpg");
}

.hover\:bg-bar:hover {
  background:url("bar.jpg");
}

希望有所幫助！