在 Tailwindcss 中修改悬停答案

【问题标题】：Modifying hover in Tailwindcss在 Tailwindcss 中修改悬停
【发布时间】：2019-11-07 08:59:07
【问题描述】：

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

【问题讨论】：

基于触控的设备没有悬停状态。我想您正在查看 :focus 或 :active 状态。 Tailwind 还允许您将类应用于那些伪选择器，例如focus:bg-blue-500.
@SethWarburton 这就是问题所在，移动设备没有悬停状态，因此，像 :hover 这样的类会在用户按下按钮等时导致效果卡住。我我试图找到一种方法让 Tailwind 使用 @media(hover:hover) 而不是常规的 :hover 来实现悬停，这会导致上述错误。
我想你误解了我的意思。我相信您看到的“卡住”效果是因为您没有为基于触摸的设备设置适当的状态（即：focus）。尝试使用正确的选择器应用您想要的样式。

【解决方案1】：

到目前为止，最简单的方法是将您自己的 @media 规则添加到 tailwind 中的 @responsive 类规则中。官方顺风文档中描述了如何做到这一点，主题为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 来修改悬停状态。

【讨论】：

我发现raw: '(hover: hover)'不够用，最后用raw: '(hover: hover) and (pointer: fine)'

【解决方案2】：

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

【讨论】：

这种方法的问题在于水平视图上的大型平板电脑，它与桌面的断点相同，所以如果我需要桌面悬停，如果我使用 md 或 lg 平板电脑将卡住悬停状态以他们为目标。 @media( hover: hover ) 似乎是目前我认为定位非鼠标设备的最佳方式。
通过引用 CSS-Tricks css-tricks.com/touch-devices-not-judged-size 我认为 @media(hover: hover) 是解决方案。
是的，@KPK 这就是为什么我想知道 Tailwind 是否有一个 @media(hover:hover) 而不是常规 :hover 的悬停属性。
我认为我们可以在 GitHub 中为这个功能创建一个 RFC

【解决方案3】：

是的，只需使用插件生成悬停变体，除了添加 :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 ],
}

【讨论】：

【解决方案4】：

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

// styles.css

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

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

【讨论】：