3

Muy buenas, digamos que tenemos un bloque (div) dividido en seis más. Cada uno de estos contiene una img, h2 y p:

Después queremos que, al pasar el ratón sobre una de las imágenes, aparezca un alert con el contenido del p del mismo contenedor. OK. Pues el único modo que he encontrado para poder acceder al p es colocando la clase(evento) en el contenedor para acceder al texto de p con (this.lastElementChild.innerHTML;).

Algo así:

var evento = document.getElementsByClassName('evento');
var par = document.getElementsByClassName('par');

for(i = 0; i < evento.length; i++){
    evento[i].addEventListener('mouseover', function(){
        var texto = this.lastElementChild.innerHTML;
        alert(texto);
    })
}
<div id="bloque">
    <div class="evento">
        <img src="img/icono engranaje.png" alt="imagen A">
        <h2>web designs</h2>
        <p class="par">aaaaaaaaa</p>
    </div>
    <div class="evento">
        <img src="img/icono estadistica.png" alt="imagen E">
        <h2>web development</h2>
        <p class="par">eeeeeeee</p>
    </div>
    <div class="evento">
        <img src="img/icono etiqueta.png" alt="imagen I">
        <h2>responsive designs</h2>
        <p class="par">iiiiiiiiiiiiii</p>
    </div>
    <div class="evento">
        <img src="img/icono nube.png" alt="imagen O">
        <h2>edit sections</h2>
        <p class="par">ooooooooo</p>
    </div>
    <div class="evento">
        <img src="img/icono pause.png" alt="imagen U">
        <h2>databases</h2>
        <p class="par">uuuuuuuuuuuuuu</p>
    </div>
    <div class="evento">
        <img src="img/icono perfil.png" alt="imagen EPA">
        <h2>android</h2>
        <p class="par">epaepaepa</p>
    </div>
</div>

Pero no encuentro la forma de que, al pasar exclusivamente por la imagen, pueda obtener el texto de p

Mil gracias!

1 respuesta 1

6

Opción con QuerySelector:

Si lo que quieres es que el evento se active al hacer el hover de la imagen puedes quedarte con todos los elementos img:

var evento = document.querySelectorAll('.evento img');

querySelectorAll devuelve una lista de elementos, por lo que después tendrás que iterar de igual manera en ella.

Y para coger el texto, conociendo la estructura puedes acceder al padre y de ahí coger el p, con otro querySelector, a diferencia del querySelectorAll este devuelve el primer elemento.

var texto = this.parentElement.querySelector("p").innerHTML;

Snippet:

var evento = document.querySelectorAll('.evento img');
for(i = 0; i < evento.length; i++){
    evento[i].addEventListener('mouseover', function(){
        var texto = this.parentElement.querySelector("p").innerHTML;
        alert(texto);
    })
}
<div id="bloque">
    <div class="evento">
        <img src="img/icono engranaje.png" alt="imagen A">
        <h2>web designs</h2>
        <p class="par">aaaaaaaaa</p>
    </div>
    <div class="evento">
        <img src="img/icono estadistica.png" alt="imagen E">
        <h2>web development</h2>
        <p class="par">eeeeeeee</p>
    </div>
    <div class="evento">
        <img src="img/icono etiqueta.png" alt="imagen I">
        <h2>responsive designs</h2>
        <p class="par">iiiiiiiiiiiiii</p>
    </div>
    <div class="evento">
        <img src="img/icono nube.png" alt="imagen O">
        <h2>edit sections</h2>
        <p class="par">ooooooooo</p>
    </div>
    <div class="evento">
        <img src="img/icono pause.png" alt="imagen U">
        <h2>databases</h2>
        <p class="par">uuuuuuuuuuuuuu</p>
    </div>
    <div class="evento">
        <img src="img/icono perfil.png" alt="imagen EPA">
        <h2>android</h2>
        <p class="par">epaepaepa</p>
    </div>
</div>

1
  • Muchas gracias, Perfecto! Commented el 28 oct. 2019 a las 11:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.