Aquí está el código
<a href="http://example.com/example-2pp.html" onmouseover="alert(this.children[1].src)"> <span class="product-image-container product-image-container-1198" style="width: 388px;"> <span class="product-image-wrapper" style="padding-bottom: 125%;"> <img class="product-image-photo" src="http://example.com/media/catalog/product/l/i/example_d17163a-a00_t-shirt_bra_white-min.jpg?width=388&height=485&store=example_en&image-type=small_image"> </span> </span> </a>Quiero obtener el img src usando esta línea de script
onmouseover="alert(this.children[1].src)">¿Es posible hacer eso?
"mouseenter"style o on* línea. ¡JS y CSS deben estar en sus respectivas etiquetas o archivos! <a href="http://example.com/example-2pp.html" onmouseenter="alert(this.querySelector('img')?.src)"> <span class="product-image-container product-image-container-1198" style="width: 388px;"> <span class="product-image-wrapper" style="padding-bottom: 125%;"> <img class="product-image-photo" src="http://example.com/media/catalog/product/l/i/example_d17163a-a00_t-shirt_bra_white-min.jpg?width=388&height=485&store=example_en&image-type=small_image"> </span> </span> </a> No utilice los atributos inline on* y style . Bastante:
const ELS_prodLink = document.querySelectorAll(".product-link"); ELS_prodLink.forEach((EL_pr) => { EL_pr.addEventListener("mouseenter", () => { const EL_img = EL_pr.querySelector(".product-image-photo"); console.log(EL_img.src); }); }); .product-image-container { width: 388px; } .product-image-wrapper { padding-bottom: 125% } <a class="product-link" href="http://example.com/example-2pp.html"> <span class="product-image-container product-image-container-1198"> <span class="product-image-wrapper" > <img class="product-image-photo" src="http://example.com/media/catalog/product/l/i/example_d17163a-a00_t-shirt_bra_white-min.jpg?width=388&height=485&store=example_en&image-type=small_image"> </span> </span> </a>