I am trying to show the child on hover over the parent or the child itself. so on hover over one div show the div inside it
in other words on hover over the red container or blue div show the blue div
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>I suggest you delegate from the nearest static container
change
const tgt = e.target.closest("div.bgs");
to
const tgt = e.target.closest("div.cons");
as necessary
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>