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

Nau*_*sif 9 border version hover tailwind-css

我正在使用 Tailwind v2.1.0 和 Laravel v8.12

我试图将鼠标悬停在具有顺风类的标签上,但它不起作用

<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>
Run Code Online (Sandbox Code Playgroud)

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

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

可能是什么问题?

Mah*_*ree 9

以下类应该完成这项工作:

hover:border-gray-700 border-transparent border-2
Run Code Online (Sandbox Code Playgroud)

我从这里找到了答案

<li class="outline-none hover:border-gray-700 border-transparent border-2 hover:border-current" ><a href="#">Info</></li>
Run Code Online (Sandbox Code Playgroud)


Dig*_*jay 0

您刚刚拼写错误border-transparent。应该border-transparent

编辑:我没有发现您的代码有任何问题。检查您的代码的演示