HOC 图像悬停组件未使用 Tailwind CSS 定位伪元素

Answer 1

首先，考虑检查：

• 视口大于

  lg

  断点。
• 您有

  10

  作为

  scale

  的值：

  module.exports = {
    theme: {
      extend: {
        scale: {
          '10': 'your value here',
  

此外，您需要确保存在具有

group

类的祖先元素，才能使

group-hover:

正常工作：

tailwind.config = {
  theme: {
    extend: {
      scale: {
        10: '0.1',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<a href="foo" class="group">
  <span class="group-hover:[&>img]:lg:scale-10 group [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out">
    <img src="https://picsum.photos/200" />
  </span>
</a>

或者，如果您打算在

<span>

元素本身上激活悬停，则需要修改变体以根本不使用

group

：

tailwind.config = {
  theme: {
    extend: {
      scale: {
        10: '0.1',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com/3.4.5"></script>

<a href="foo">
  <span class="[&>img]:hover:lg:scale-10 [&>img]:transition [&>img]:duration-300 [&>img]:ease-in-out">
    <img src="https://picsum.photos/200" />
  </span>
</a>