Question

我注意到Tailwindcss中的：hover使用默认的悬停选择器，这会在移动设备上导致“卡住”的悬停状态。有没有办法修改：hover函数来代替@media（hover：hover）？

Answer 1

到目前为止，最简单的方法是在顺风向@ 响应类规则中添加自己的@media规则。官方的顺风文档中custom media queries主题下描述了如何执行此操作。

只需将其添加到您的配置中即可：

// tailwind.config.js
module.exports = {
    theme: {
        extend: {
          screens: {
            'hover-hover': {'raw': '(hover: hover)'},
      }
    }
  }
}

这在CSS中转换为@media (hover: hover) { ... }。瞧，您可以使用hover-hover:text-red仅在具有悬停功能的设备上显示红色文本。

要制作自己的文件，请保持“原始”状态，并将其他两个属性更改为所需的任何媒体查询。第一个属性hover-hover是您在顺风中使用的属性。第二个(hover: hover)是您实际的CSS @media查询的样子。例如：hover: none或pointer: coarse。

现在，继续并使用hover-hover：hover：text-red来修改您的悬停状态。

Answer 2

像sm: md: lg:这样的响应式属性将为您完成那些媒体查询工作。请参阅docs中的示例。如果您不想在移动设备中使用悬停状态。指定以下内容：-sm:hover:no-underline

Answer 3

您可以像下面这样轻松create your own hover：

// styles.css

@variants hover {
  .banana {
    color: yellow;
  }
}

然后像class='hover:banana'

一样使用它

Answer 4

是的，只需使用插件生成悬停变体，除了添加 :hover 伪选择器之外，还将所有规则包装在 @media(hover:hover) 规则中：

// tailwind.config.js

const plugin = require('tailwindcss/plugin');

const hoverPlugin = plugin(function({ addVariant, e, postcss }) {
    addVariant('hover', ({ container, separator }) => {
        const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover)' });
        hoverRule.append(container.nodes);
        container.append(hoverRule);
        hoverRule.walkRules(rule => {
            rule.selector = `.${e(`hover${separator}${rule.selector.slice(1)}`)}:hover`
        });
    });
});

module.exports = {
  plugins: [ hoverPlugin ],
}

Answer 5

如果你想禁用悬停，添加顺风类“pointer-events-none”就是你需要的一切。

<a className="pointer-events-none" href='...>
...
</a>

在Tailwindcss中修改悬停

5 个答案: