gpt4 book ai didi

reactjs - 悬停在使用 tailwind css 的超链接中不起作用

转载 作者:行者123 更新时间:2023-12-05 03:35:06 26 4
gpt4 key购买 nike

我试图在悬停时更改下面创建的列表的颜色,但它没有做它应该做的事情。我不知道我在这里错过了什么。

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

最佳答案

它有效,但是当你在 tailwindcss 中使用 hover: 时,你需要更多 specific and exactly .下面是您的代码片段示例(我稍微更改了一下以查看效果)。您可以简单地将此代码转换为 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>

关于reactjs - 悬停在使用 tailwind css 的超链接中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69972645/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com