Início / coding / Perguntas / 77228096
Accepted
FloCAD
Asked: 2023-10-04 16:46:46 +0800 CST

Como acessar todos os filhos de uma div no tailwindcss com evento hover?

  • 772

Eu tenho uma barra de navegação como esta:

<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>

Mas gostaria de evitar a duplicação de classes, então tentei a sintaxe mencionada neste post :

<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>

Funciona bem, exceto que quando passo o mouse sobre um elemento, ele destaca todos os elementos. Parece que agrupar a classe desta forma também está agrupando o tratamento de eventos...

Tenho exatamente 1 hora de experiência com vento favorável, desculpe antecipadamente se perdi esse ponto nos documentos, mas não encontrei nada sobre o meu problema.

tailwind-css

2 respostas

  1. Best Answer

    Para fazer exatamente o que você deseja com classes CSS inline e tailwind, você só precisa modificar um pouco seu código. Veja como:

    <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>

    Você pode trocar [&>a]por [&>router-link], se isso funcionar para você.

    • 1

  2. Tudo bem, acabei de encontrar minha solução nos documentos ali .

    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

relate perguntas