我对Tailwind CSS和CSS总体都比较新手。
当按钮被禁用时,我需要让它们停止进行transform/transition效果。目前,禁用颜色变化被应用了,但是悬停时的转换/过渡仍然会发生。
我尝试使用disabled:transform-none和disabled:transition-none,但没有得到期望的结果。
正在使用的技术是- ReactJS, Tailwind CSS
以下是使用的类的示例代码片段:
<button
disabled={disableIt}
className="text-xs rounded disabled:transform-none disabled:transition-none disabled:bg-gray disabled:cursor-not-allowed disabled:text-white bg-gray-600 mx-1 transition duration-500 ease-in-out transform hover:translate-x-1 hover:scale-110 hover:blue-300 hover:shadow-md"
>
Click me
</button>
注意:disableIt 是用于禁用或启用按钮的状态
我的tailwind.config.js文件的变体部分如下:
variants: {
opacity: ({ after }) => after(["disabled"]),
backgroundColor: ({ after }) => after(["disabled"]),
textColor: ({ after }) => after(["disabled"]),
hover: ({ after }) => after(["disabled"]),
cursor: ({ after }) => after(["disabled"]),
transition: ({ after }) => after(["disabled"]),
transform: ({ after }) => after(["disabled"]),
extend: {
padding: ["hover"],
},
},
请帮助我。
<button>
,这是一个很好的选择。请注意:它不适用于<a>
链接。 - clema
并将其样式设置为看起来像一个button
时,你正在做一些错误的事情。但如果这是要求,那么在这种情况下,你总是选择pointer-events: none;
,所以:hover
将无法工作。 - dvlden