Попутный ветер включает функцию группового наведения только при включении
У меня есть несколько кнопок, оформленных с помощью TailwindCSS.
Эти кнопки содержат некоторые значки/вспомогательный текст (<span>), которые должны иметь цвет (отличный от цвета, используемого для текста кнопки), когда мышь находится над кнопкой.
Я использовал класс 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>Обратите внимание, что эффект наведения устанавливается только тогда, когда кнопка включена (с помощью hover:enabled).
Если кнопка отключена, я хочу хорошо отключить этот эффект наведения на вспомогательный текст.
Я пробовал group-hover:enabled:text-pink-900, но не получается.
disabled:pointer-events-none для меня не вариант, потому что сломается disabled:cursor-not-allowed.
Ответы 5
<script src = "https://cdn.tailwindcss.com#.js"></script>
<button class = "group bg-indigo-500 hover:bg-indigo-400 disabled:pointer-events-none">
<span class = "group-hover:text-pink-900">helper text</span>
</button>
<button disabled class = "group bg-indigo-500 hover:bg-indigo-400 disabled:pointer-events-none">
<span class = "group-hover:text-pink-900">helper text</span>
</button>Вам нужно проверить, отключена ли она или нет, это должно решить вашу проблему.
Поэтому вам нужно записать все отключенные классы в свой код или использовать оболочку, чтобы не давать событиям указателя никаких событий — курсор не разрешен stackoverflow.com/questions/46665625/…
вы можете сделать это, «отключено: указатель-события-нет»
disabled:pointer-events-none для меня не вариант, потому что сломается disabled:cursor-not-allowed.
Ваш ответ можно улучшить, добавив дополнительную вспомогательную информацию. Пожалуйста, отредактируйте , добавив дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.
Мне удалось добиться желаемого поведения, комбинируя модификаторы group-* следующим образом:
group-hover:group-enabled:...
<span class = "group-hover:group-enabled:text-pink-900">★</span>
<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>Объяснение:
group-hover:group-enabled:text-indigo-900=> создает следующее правило CSS:
.group:hover:enabled .(classname) {
--tw-text-opacity: 1;
color: rgb(131 24 67 / var(--tw-text-opacity));
}
Можете ли вы проверить приведенное ниже решение? Надеюсь, это сработает для вас.
<script src = "https://cdn.tailwindcss.com#.js"></script>
<button
class = "rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white hover:bg-indigo-400 hover-[&>span]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50">
<span>Not Disabled</span>
</button>
<button
class = "rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white hover:bg-indigo-400 hover-[&>span]:text-red-700 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50 disabled:hover-[&>span]:text-white"
disabled>
<span>Disabled</span>
</button>Пример: https://play.tailwindcss.com/hXHNBTxnvz
Хороший. Мне удалось это реализовать с помощью group-hover:group-enabled.
Недавно у меня возникла похожая проблема: чтобы решить ее, сначала скройте вспомогательный текст, используя классы invisible и pointer-events-none. Затем сделайте ее видимой и включите эффекты наведения только при наведении на кнопку (group-hover:visible). Таким образом, эффект наведения отключается, когда кнопка отключена, это должно привести к желаемому поведению:
<script src = "https://cdn.tailwindcss.com#.js"></script>
<div class = "m-4 flex space-x-4">
<button class = "relative rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 hover:bg-indigo-400 group">
Not Disabled
<span class = "absolute top-full left-0 w-full bg-pink-500 opacity-0 transition-opacity duration-300 pointer-events-none invisible group-hover:visible group-hover:opacity-100">
Helper Text
</span>
</button>
<button class = "rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold uppercase tracking-wider text-white focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
Disabled
</button>
</div>
disabled:pointer-events-noneдля меня не вариант, потому что сломаетсяdisabled:cursor-not-allowed.