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!