Tailwind CSS 响应类/状态类不起作用

Question

我正在使用 transform 翻译 y 值转换。我想要的是这些类在小于“lg”的屏幕上使用 “焦点”激活，在屏幕“lg”或更大的屏幕上使用 “悬停”激活。 这个想法是解决移动设备上使用点击（以及因此使用焦点）悬停的问题。如果你们有其他想法来处理这个问题，我将不胜感激。

查看以下标签中的

classes

figure和figcaption以了解focus和hover的使用。

<div class="max-w-sm bg-white border border-gray-200 rounded-lg">

    <figure class="relative w-full transform transition duration-300 focus:scale-105 lg:hover:scale-105 overflow-hidden group">

...................... Some Image ....................

        <figcaption class="absolute w-full px-6 py-2 pt-6 rounded-b-lg text-white bottom-0 transform translate-y-36 transition duration-300 group-focus:translate-y-0 lg:group-hover:translate-y-0">

................. Headings and paragraphs and stuff ..........................

            </figcaption>
    </figure>  
</div>

现在它非常适合“lg”和更大的屏幕，但不适用于小于“lg”的屏幕上的

焦点

Answer 1

修复方法如下：

选项 1：删除 lg: 前缀

通过从 focus:scale-105 中删除 lg: 前缀，缩放效果将应用于所有屏幕尺寸，包括较小屏幕上的焦点。

选项 2：使用单独的类来专注于较小的屏幕

您可以专门创建一个单独的类来专注于较小的屏幕（例如，sm:focus:scale-105）并将其应用于图形元素。