Estoy tratando de mostrar al niño al pasar el mouse sobre el padre o el niño mismo. así que al pasar el cursor sobre un div, muestre el div dentro de él
en otras palabras, al pasar el mouse sobre el contenedor rojo o el div azul, muestre el div azul
const bgsC = document.querySelectorAll('.cons'); const bgs = document.querySelectorAll('.bgs'); bgsC.forEach(bgc => { bgc.addEventListener('mouseenter', function() { bgs.forEach(bg => { console.log(bg); }) }) }) .cons { width: 200px; height: 300px; background-color: red; position: relative; display: inline-block; left: 30%; top: 200px; } .bgs { width: 200px; height: 70px; background-color: blue; position: absolute; left: 0; bottom: 0; cursor: pointer; opacity: 0; } p { text-align: center; color: #fff; padding-top: .6rem; } <div class="cons"> <div class="bgs"> <p>hello 1</p> </div> </div> <div class="cons"> <div class="bgs"> <p>hello 2</p> </div> </div> <div class="cons"> <div class="bgs"> <p>hello 3</p> </div> </div>Te sugiero que delegues desde el contenedor estático más cercano
cambio
const tgt = e.target.closest("div.bgs");a
const tgt = e.target.closest("div.cons");según sea necesario
document.getElementById("container").addEventListener('mouseover', function(e) { const tgt = e.target.closest("div.bgs"); if (tgt) console.log(tgt.querySelector("p").textContent); }) <div id="container"> <div class="cons"> <div class="bgs"> <p>hello 1</p> </div> </div> <div class="cons"> <div class="bgs"> <p>hello 2</p> </div> </div> <div class="cons"> <div class="bgs"> <p>hello 3</p> </div> </div> </div>