Una formula para varias acciones iguales solo funciona una vez

Hola compañeros,

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

Solo está haciéndolo en un elemento, tal como lo tienes en el código, necesitas iterar (foreach) tu código, para que lo haga en todos los que hagan "match" con la clase.

davidrod dijo:

Solo está haciéndolo en un elemento, tal como lo tienes en el código, necesitas iterar (foreach) tu código, para que lo haga en todos los que hagan "match" con la clase.

Hacer clic para expandir...

Muchas gracias compañero, investigaré un poco ya que estoy algo verde en funciones pero estoy bastante orientado a lo que dices.

Gracias, saludos.

@Kevin77 prueba pasandole el this a las funciones.

YeltsinReyes dijo:

@Kevin77 prueba pasandole el this a las funciones.

JavaScript:

 onmouseover="ocultarEspecialidad(this)" onmouseout="textoEspecialidad(this)"

function ocultarEspecialidad(este) {
    este.style.display = 'none';
}

function textoEspecialidad(este) {
    este.style.display = 'block';
}

Hacer clic para expandir...

Gracias compañero, no funciona, sigo mirando a ver si acierto.

Kevin77 dijo:

Muchas gracias compañero, investigaré un poco ya que estoy algo verde en funciones pero estoy bastante orientado a lo que dices.

Gracias, saludos.

Hacer clic para expandir...

Estoy mirando y creo que tengo que crear el array también para que itere con el foreach no?

He probado tambien con un if y no me ha funcionado.

Con lo sencillo que lo veía yo en mi cabeza 🙁

Gracias a todos compañeros.

He llegado hasta aquí, el problema ahora es que me los oculta todos, no solo en el que estoy haciendo onmouseover:

function ocultarEspecialidad() {
let ocultarTexto = document.querySelectorAll('.miclase-texto');

ocultarTexto.forEach(function(e){
e.style.display = "none";
});
}

function textoEspecialidad() {
let insertarTexto = document.querySelectorAll('.miclase-texto');

insertarTexto.forEach(function(e){
e.style.display = "block";
});
}