使用 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>
I need help on the hover state. I'm using Tailwind, and I need to make an image with a transparent background(bg-blue-300) on top of it when I hover. Below is my code; I tried several changes. Can anyone help me?
<a href="#" class="hover:bg-blue-600">
<img class="w-full rounded-md" src="/images/image-sample.jpg">
</a>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的图像覆盖了背景
标签等背景；
在悬停时为图像添加不透明度，并将内联块添加到锚标记，因为默认情况下链接是内联的，因此它们没有高度，因此没有背景颜色
Your image is covering the background
Of tag and so the background;
add opacity to your image on hover and also add inline-block to anchor tag as links are inline by default so they don't have heights therefor no background-color