Perdonar que sea tan ambiguo en el título del post pero no sabía como ponerlo, os comento el problema y soy todo oídos.
Tengo una fórmula en javascript que me oculta un campo de texto con un onmouseover, y cuando se sale del objeto un onmouseout, lo tengo puesto en varios objetos de una misma página, pero solo se me ejecuta en el primer elemento, no entiendo porque en los otros no se ejecuta si en uno funciona. Esta hecho con bootstrap por si veis el html un poco raro, mi código:
<div class="row mt-4 ml-2 ml-lg-0 mt-lg-4">
<div class="col-lg-4 mb-3 mb-lg-0 miclase">
<a href="prueba.php">
<div class="miclase-imagen" onmouseover="ocultarEspecialidad()" onmouseout="textoEspecialidad()">
<h2 class="miclase-texto">motor</h2>
</div>
</a>
</div>
<div class="col-lg-4 mb-3 mb-lg-0 miclase">
<a href="prueba.php">
<div class="miclase-imagen" onmouseover="ocultarEspecialidad()" onmouseout="textoEspecialidad()">
<h2 class="miclase-texto">mecanica</h2>
</div>
</a>
</div>
<div class="col-lg-4 mb-3 mb-lg-0 miclase">
<a href="prueba.php">
<div class="miclase-imagen" onmouseover="ocultarEspecialidad()" onmouseout="textoEspecialidad()">
<h2 class="miclase-texto">repuestos</h2>
</div>
</a>
</div>
</div><!--Fin row-->
</div><!--Fin row-->
Y el Javascript:
function ocultarEspecialidad() {
let ocultarTexto = document.querySelector('."miclase-texto');
ocultarTexto.style.display = 'none';
}
function textoEspecialidad() {
let ocultarTexto = document.querySelector('."miclase-texto');
ocultarTexto.style.display = 'block';
}
Ya os digo, funcionar me funciona en el primero solamente.
Gracias a todos, saludos