how can I give hover effect to overlapped nodes (z-index)

Question

<div class="wrap">
  <div class="col"/>
  <div class="col"/>
  <div class="col"/>
  <div class="col"/>
  <div class="col"/>
  <div class="row"/>
  <div class="row"/>
  <div class="row"/>
  <div class="row"/>
  <div class="row"/>
</div>

and this col & row are overlapped like this

I want to give hover effect to both elements. I tried with jQuery event handler but the behind one is a dynamically generated node so I tried something like this

$('html').on('mouseover', '-behindOne-', (e) => {
    console.log(e);
});

but event.target was higher overlapped node
and event.current was html
and this was undefined
what should I do?

---

I want to effect background-color change.
I want use hover event at same time .
each hover event works well
but at the center of that Pic
only effect on higher one (z-index)

also i can't do like this

.wrap:hover .col {}
.wrap:hover .row {}

it should only effect on mouseOvered col and row

I want this!~~

Answer 1

if you want to hover effect on both of them

.col:hover{
  //change somethings
}

.row:hover{
  //change somethings
}

but this code may help just for css tricks. you can try also with jquery like

$( ".col" ).mouseover(function() {
  //change somethings
});
$( ".row" ).mouseover(function() {
  //change somethings
});

and please explain what do you want to change exactly with hover effect

PLUS div-->

  //this is html block
 <div class=plus>
  <div class="col"/>
  <div class="row"/>
 </div>

   //this is css block
  .plus div:hover{
    background-color:black
  }