13

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

4

4 回答 4

20

到目前为止，最简单的方法是将您自己的 @media 规则添加到 tailwind 中的 @responsive -class规则中。在自定义媒体查询主题下的官方顺风文档中描述了如何做到这一点。

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

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

这转化为@media (hover: hover) { ... }css。瞧，您可以hover-hover:text-red只为具有悬停能力的设备显示红色文本。

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

现在，继续使用 hover-hover:hover:text-red 来修改悬停状态。

于 2020-03-01T19:07:34.080 回答
2

是的，只需使用插件生成悬停变体，该插件除了添加 :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 ],
}
于 2021-05-09T14:30:54.420 回答
1

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

于 2019-06-28T14:08:27.623 回答
0

您可以轻松创建自己的悬停，如下所示：

// styles.css

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

然后像这样使用它class='hover:banana'

于 2020-05-05T21:11:00.363 回答