Css Tailwind仅在启用时才在按钮上设置grouphover

发布于04月15日

我有一些使用TailwindCSS风格的按钮.

这些按钮包含一些图标/帮助文本(<span>)，当鼠标位于按钮上时，这些图标/帮助文本应该接收 colored颜色 (different than the color used for button text).

我在按钮上使用了group类，然后在内部元素中:

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

<button class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed">
  <span class="group-hover:text-pink-900">helper text</span>
</button>

<button disabled class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed">
  <span class="group-hover:text-pink-900">helper text</span>
</button>

通知仅在the button is enabled时设置悬停效果(使用hover:enabled).

如果按钮为disabled，我想在帮助器文本上禁用此悬浮效果.

我已经try 了group-hover:enabled:text-pink-900个，但不起作用.

disabled:pointer-events-none对我来说不是一个 Select ，因为它会打破disabled:cursor-not-allowed.

示例: https://play.tailwindcss.com/US7h6jStv9

<script src="https://cdn.tailwindcss.com#.js"></script> <button class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed ..."> Button text <span class="group-hover:group-enabled:text-pink-900">★</span> </button> <button disabled class="group bg-indigo-500 hover:enabled:bg-indigo-400 disabled:cursor-not-allowed ..."> Button text <span class="group-hover:group-enabled:text-pink-900">★</span> </button>

Css Tailwind仅在启用时才在按钮上设置grouphover

推荐答案

Css相关问答推荐

与Chrome和Edge相比，背景位置动画在Firefox中运行并不流畅

基于子元素的子元素数量的样式元素

沿浮动形状—面元素外路径将文字垂直居中""

如何将bslib：：card()中的扩展按钮移到右上方，其中full_screen = TRUE？

当滚动到页脚时，是否可以隐藏固定元素？

以百分比形式输入的css宽度属性不会生效

我应该在哪里放置expo /Reaction本地项目的CSS重置文件？

css ：：part 伪 Select 器 Chrome 兼容性？

在 SVG 元素上方添加标签而不移动 SVG 元素

整个列的 CSS Grid Margin Top

React Typescript 中的自动 typewriter 效果

使用 CSS 填充悬停过渡的闪烁文本问题

如何使用rvest中的 node 和类提取网页数据

卡在 CSS 中的grid-template-columns中

使用 Flex Box Tailwind CSS 的元素不相等

使用 JavaScript 将 CSS 添加到？

Flexbox 列自底对齐

使用@font-face 使用多种自定义字体？

从样式设置为 % 的元素获取宽度(以像素为单位)？

仅针对使用的类优化 Font Awesome