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.