悬停在使用顺风 css 的超链接中不起作用答案

【问题标题】：Hover not working in hyperlinks using tailwind css悬停在使用顺风 css 的超链接中不起作用
【发布时间】：2021-12-26 13:21:37
【问题描述】：

我试图在悬停时更改下面创建的列表的颜色，但它没有做它应该做的事情。我无法弄清楚我在这里缺少什么。

<ul className="ul">
  <li>
    <a className="hover:text-white bg-purple border-white rounded-sm" href="#">abcd</a>
  </li>
</ul>

【问题讨论】：

标签： reactjs tailwind-css

【解决方案1】：

它有效，但是当您在 tailwindcss 中使用hover: 时，您需要更多specific and exactly。下面的示例与您的代码 sn-p（我稍作改动以查看效果）。您可以简单地将此代码转换为 react.js 添加 className 而不是 class。

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
</head>

<body class="h-full">
  <div class="flex items-center justify-center h-screen">
    <ul>
      <li>
        <a class="hover:text-white hover:bg-purple-600 hover:border-gray-300 border-2 rounded-sm p-3" href="#">It Works!</a>
      </li>
    </ul>
  </div>
</body>

【讨论】：

所以，我应该给每个需要悬停效果的属性加上悬停前缀。
@sumitkhatrii 完全是 ;-) 祝你好运和最好的问候！
感谢您的帮助！！！ @marioG8
@sumitkhatrii 不客气 ;-)