Temas, Especialista, Texto Tengo segmentos que parecen pequeñas tarjetas con palabras. Me gustaría mostrar una descripción de la palabra específica cuando el usuario pasa el cursor sobre ella.

El código que tengo es el siguiente y las clases en cuestión son "specialist", "specialist-text" :

 const spec = document.querySelector('.specialist') const spect = document.querySelector('.specialist-text') spec.addEventListener('mouseenter', () => spect.classList.remove('hidden'))

 .hidden { display: none; }

 <section class="topics"> <h3 class="large center my-1">Topics</h3> <div class="width grid overflow"> <div class="topic-list-update"> <div class="card2 center btn2 specialist">Specialist</div> </div> <div class="topics-text"> <div class="specialist-text hidden">Specialist mathematics 1234</div> </div> </div> </section>

Y no entiendo por qué no funciona. Intenté con addEventListener('mouseover') , intenté usar document.getElementById e intenté usar una función en lugar de una función de flecha.

Recibo un error al iniciar el archivo html en Firefox:

 Uncaught TypeError: spec is null <anonymous> http://127.0.0.1:5500/js/script.js:12

Soy un completo principiante y le agradezco de antemano su ayuda.