在一个类别上悬停以触发另一个类别中的动画是否有可能，使用Tailwind CSS？

huangapple
go评论86阅读模式
英文:

Is there a way to hover over a link in one class to trigger an animation in another using Tailwind CSS?

问题

I am having trouble getting a link animation in TailwindCSS (which has made life easier) to work...

What I want to do is hover over About and get an animation to work. At the moment, when I hover over the link in a div, nothing happens, but when I hover over the clearspace/ &nbsp (which is also inside the div), the animation plays.

Here's some code:

  1. <!-- begin snippet: js hide: false console: false babel: false -->
  3. <!-- language: lang-html -->
  4.     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
  5.     <div class="group text-black text-xs text-center relative">
  6.       <a href="#">
  7.        <span>
  8.          About
  9.        </span>
  10.        <span class="absolute -z-10 top-0 -right-4 group-hover:transition-all duration-300 ease-in-out group-hover:border-r-8 group-hover:border-red-700">
  11.          &nbsp;
  12.        </span>   
  13.      </a>
  14.     </div>
  16. <!-- end snippet -->

Any help greatly appreciated...

P.S. Also the whole div moves to the left when hovered over (including the About). This shouldn't happen...

英文:

I am having trouble getting a link animation in TailwindCSS (which has made life easier) to work...

What I want to do is hover over About and get an animation to work. At the moment, when I hover over the link in a div, nothing happens, but when I hover over the clearspace/ &nbsp (which is also inside the div), the animation plays.

Here's some code:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp&quot;&gt;&lt;/script&gt;
  3. &lt;div class=&quot;group text-black text-xs text-center relative&quot;&gt;  
  4.   &lt;a href=&quot;#&quot;&gt;
  5.    &lt;span&gt;
  6.      About
  7.    &lt;/span&gt;
  8.    &lt;span class=&quot;absolute -z-10 top-0 -right-4 group-hover:transition-all duration-300 ease-in-out group-hover:border-r-8 group-hover:border-red-700&quot;&gt;
  9.      &amp;nbsp;
  10.    &lt;/span&gt;   
  11.  &lt;/a&gt;
  12. &lt;/div&gt;

<!-- end snippet -->

Any help greatly appreciated...

P.S. Also the whole div moves to the left when hovered over (including the About). This shouldn't happen...

答案1

得分: 0

Apply tailwind classes on the html and it will work fine. Try that:-

  1. <!-- begin snippet: js hide: false console: false babel: false -->
  3. <!-- language: lang-html -->
  5.     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
  7.          <div class="button group text-black text-xs text-center">
  8.             <a href="#">
  9.                About
  10.                   <span class="link transition-all duration-300 ease-in-out group-hover:border-r-4">
  11.                       &nbsp;
  12.                   </span>
  13.             </a>
  14.           </div>
  16. <!-- end snippet -->
英文:

Apply tailwind classes on the html and it will work fine. Try that:-

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

  1. &lt;script src=&quot;https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp&quot;&gt;&lt;/script&gt;
  3.      &lt;div class=&quot;button group text-black text-xs text-center&quot;&gt;
  4.         &lt;a href=&quot;#&quot;&gt;
  5.            About
  6.               &lt;span class=&quot;link transition-all duration-300 ease-in-out group-hover:border-r-4&quot;&gt;
  7.                   &amp;nbsp;
  8.               &lt;/span&gt;
  9.         &lt;/a&gt;
  10.       &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月14日 17:50:40
  • 转载请务必保留本文链接：https://go.coder-hub.com/76246831.html
  • html
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定