边框样式在顺风悬停时不起作用

Posted 2023-03-07

【中文标题】边框样式在顺风悬停时不起作用

【英文标题】：Border style not working on hover in tailwind

【发布时间】：2021-07-13 13:13:55

【问题描述】：

我在 Laravel v8.12 中使用 tailwind v2.1.0

我正在尝试将鼠标悬停在带有顺风类的 a 标记上，但它不起作用

<a href="/" class="text-gray-800 border-transparent border-b-2 hover:border-gray-600 hover:text-gray-800 px-3 py-2 text-sm font-medium uppercase">Home</a>

当我用border-gray-100或任何其他颜色替换border-transparent时，我可以看到悬停效果。

最初我不想要任何边框，这就是提到边框透明的原因。

可能是什么问题？

【参考方案1】：

我从here找到了我的答案

<li class="outline-none hover:border-gray-700 border-transparent border-2 hover:border-current" ><a href="#">Info</></li>

【参考方案2】：

您只是拼错了 border-transparent。应该是border-transparent

编辑：我认为您的代码没有任何问题。检查代码的demo。

【讨论】：

抱歉，输入问题时打错字了