tailwind css - 在悬停时为另一个元素设置动画

Posted 2023-03-06

【中文标题】tailwind css - 在悬停时为另一个元素设置动画

【英文标题】：tailwind css - animate another element on hover

【发布时间】：2021-04-04 20:35:48

【问题描述】：

在使用 tailwind css 转换网站的过程中。 我有一个元素，它在悬停时会为其子元素设置动画。 我正在努力了解如何使用顺风 css 做到这一点。

这是使用基本 CSS 的代码

.cont:hover .hoverme
  animation: hoverwave;
  animation-duration: .5s;
  animation-direction: normal;
  animation-fill-mode: forwards;

@keyframes hoverwave 
  0%transform: scale(1,1);
  100%transform: scale(1.2,1.2);

<!-- PROJECT1 START-->
<div class="cont overflow-hidden w-projmob mx-4 sm:w-projmob-md lg:w-projmob-xl opacity-90 cursor-pointer transition duration-300 mt-20 h-auto border-box bg-white rounded-lg shadow-lg hover:opacity-100">

////////////////

<div class="w-full h-20 absolute bottom-0 -left-5 z-20">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="width: 150%;" class="hoverme"><path fill="#fff" fill-opacity="1" d="M0,32L48,53.3C96,75,192,117,288,128C384,139,480,117,576,106.7C672,96,768,96,864,117.3C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
</div>
</div>

///////////////

</div>
<!--PROJECT END-->

当悬停容器 .cont 时，类 .hoverme 动画。

谢谢

【问题讨论】：

您好，能否请您也包含您的 html？谢谢

添加，道歉。

我想我可能需要在 tailwind.config.js 中扩展一些东西......但不确定是什么

嗨 rounin... 上面的代码运行良好。我正在寻找有关如何使用 TAILWIND CSS 进行编码的答案。

我很抱歉 - 我以为您将上面的代码作为顺风的示例。我会鞠躬。抱歉，我无法提供更多帮助。

【参考方案1】：

HOVERME 不同于hoverme CSS 类区分大小写。更改 CSS 或 HTML，使它们具有相同的大小写。

【讨论】：

感谢 John，但添加了 HOVERME 以使该类在上面脱颖而出，但 vie 改变了它。悬停是有效的，但我需要知道的是如何使用顺风 css 实现这一点。

【参考方案2】：

像这样为悬停的元素赋予组类

<div class="group">
  <p class="group-hover:text-gray-900">afected element</p>
</div>