使用 Tailwind 在图像上悬停状态 CSS
Hover state on image using Tailwind CSS
我需要有关悬停状态的帮助。我正在使用 Tailwind，当我悬停时，我需要在它上面制作一个具有透明背景（bg-blue-300）的图像。以下是我的代码；我尝试了几个变化。谁能帮帮我？
<a href="#" class="hover:bg-blue-600">
<img class="w-full rounded-md" src="/images/image-sample.jpg">
</a>
<a href="#" class="bg-blue-300 inline-block">
<img class="w-full rounded-md hover:opacity-[0]" src="/images/image-sample.jpg">
</a>
您的图片覆盖了背景
标签等背景；
在鼠标悬停时为图像添加不透明度，并将 inline-block 添加到锚标记，因为默认情况下链接是内联的，因此它们没有高度因此没有 background-color
我需要有关悬停状态的帮助。我正在使用 Tailwind，当我悬停时，我需要在它上面制作一个具有透明背景（bg-blue-300）的图像。以下是我的代码；我尝试了几个变化。谁能帮帮我？
<a href="#" class="hover:bg-blue-600">
<img class="w-full rounded-md" src="/images/image-sample.jpg">
</a>
<a href="#" class="bg-blue-300 inline-block">
<img class="w-full rounded-md hover:opacity-[0]" src="/images/image-sample.jpg">
</a>
您的图片覆盖了背景 标签等背景； 在鼠标悬停时为图像添加不透明度，并将 inline-block 添加到锚标记，因为默认情况下链接是内联的，因此它们没有高度因此没有 background-color