主页 / coding / 问题 / 77228096
Accepted
FloCAD
Asked: 2023-10-04 16:46:46 +0800 CST

如何通过悬停事件访问 tailwindcss 中 div 的所有子级？

  • 772

我有一个像这样的导航栏：

<nav class="space-x-4">
  <router-link to="/home" class="hover:text-gray-300 transition duration-300">Home</router-link>
  <router-link to="/form" class="hover:text-gray-300 transition duration-300">Form</router-link>
  <router-link to="/about" class="hover:text-gray-300 transition duration-300">About</router-link>
</nav>

但我想避免类重复，所以我尝试了这篇文章中提到的语法：

<nav class="space-x-4 [&>router-link]:hover:text-gray-300 transition duration-300">
  <router-link to="/home">Home</router-link>
  <router-link to="/form">Form</router-link>
  <router-link to="/about">About</router-link>
</nav>

它运行良好，只是当我将鼠标悬停在一个元素上时，它会突出显示所有元素。看来以这种方式对类进行分组也是对事件处理进行分组......

我在顺风方面有整整 1 小时的经验，所以如果我错过了文档中的这一点，请提前抱歉，但我没有找到有关我的问题的任何内容。

tailwind-css

2 个回答

  1. Best Answer

    要准确地执行您想要使用内联 css 和 tailwind 类执行的操作，您只需稍微修改代码即可。就是这样：

    <nav class="space-x-4 hover:[&>a]:text-gray-300 transition duration-300">
  <router-link to="/home">Home</router-link>
  <router-link to="/form">Form</router-link>
  <router-link to="/about">About</router-link>
</nav>

    如果适合您，您可以换成[&>a]。[&>router-link]

    • 1

  2. 好吧，我刚刚在文档中找到了我的解决方案。

    HTML：

    <nav class="space-x-4">
  <router-link to="/home" class="nav-btn">Home</router-link>
  <router-link to="/form" class="nav-btn">Form</router-link>
  <router-link to="/about" class="nav-btn">About</router-link>
</nav>

    CSS：

    @tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .nav-btn {
    @apply hover:text-gray-300 transition duration-300
  }
}
    • 0

相关问题