悬停：秤不适用于顺风轨？有什么建议吗？

Question

这是我的代码，我想将 hide:Scale 实用程序从 tailwindCSS 应用到我的链接框，但它不起作用。知道我在这里制造了什么冲突吗？

<% content_for :javascript_includes do %> <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <% end %>

联系人仪表板

<%= link_to 'Export to CSV', export_admin_contact_dashboard_index_path(format: :csv), class: 'text-white ease-in-out bg-green-500 hover:no-underline hover:bg-green-600 hover:scale-90 px-4 py-2 rounded-lg shadow-lg' %>。 这是我一直在测试悬停秤的盒子，但它不起作用。

<%= link_to 'Export to PDF', export_admin_contact_dashboard_index_path(format: :pdf), class: 'text-white bg-red-800 hover:no-underline hover:bg-red-700 active:bg-red-700 focus:outline-none focus:ring focus:ring-red-400 px-4 py-2 rounded-lg shadow-xl' %>

<%= link_to 'Export to Excel', export_admin_contact_dashboard_index_path(format: :xlsx), class: 'text-white bg-green-800 hover:no-underline hover:bg-green-700 active:bg-green-700 focus:outline-none focus:ring focus:ring-green-400 px-4 py-2 rounded-lg shadow-lg ' %>

我尝试过使用普通 CSS，但它也不起作用。

Answer 1

您无法转换内联元素。将您的链接设为

block

、

inline-block

或

flex

。

只有可变形元素才能变形。也就是说，所有布局由 CSS 盒模型控制的元素...

https://developer.mozilla.org/en-US/docs/Web/CSS/transform