Question

在使用 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 动画。

谢谢

Answer 1

为悬停的元素赋予组类

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

Answer 2

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

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

2 个答案: