如何给重叠的节点悬停效果（z索引）

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>

并且此列和行像这样重叠

我想对两个元素都进行悬停效果。 我尝试使用jQuery事件处理程序 但后面一个是 动态生成的节点 所以我尝试了这样的东西

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

但是event.target是重叠节点较高的
而event.current是html
并且this是undefined
我该怎么办？

---

我想实现background-color的更改。
我要使用悬停event at same time。
每个悬停事件都运作良好
但在该图片的中心
仅对较高的一个（z索引）有效

我也不能这样

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

它应该只对mouseOvered col和row起作用

我想要这个！~~

Answer 1

如果要对它们两个都悬停效果

.col:hover{
  //change somethings
}

.row:hover{
  //change somethings
}

但是此代码可能仅对CSS技巧有用。 您也可以尝试使用

之类的jquery

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

并请说明您希望通过悬停效果确切更改哪些内容

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
  }