如何为重叠节点提供悬停效果（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>

这个 col & row 像这样重叠

我想为这两个元素赋予悬停效果。 我尝试使用 jQuery 事件处理程序 但后面的是一个 动态生成的节点 所以我尝试了这样的事情

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

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

---

我想更改background-color。
我想使用悬停event at same time。
每个悬停事件都运行良好
但在该图片的中心
只对高一级（z-index）有影响

我也不能这样

.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
  }