css - 防止悬停在绝对定位的孩子上传播给父母

Question

我在具有悬停状态的父级上方有一个绝对定位的菜单。

我正在寻找一种方法，以便将鼠标悬停在菜单上不会触发父级的悬停状态。

.row {
  height: 52px;
  background: #F4F3D9;
  width: 100%;
  position: relative;
}

.row:hover {
  background: black; 
}


.menu {
  height: 100px;
  width: 100px;
  background-color: green;
  position: absolute;
  z-index: 500;
}

<div class="container">
  <div class="row">
     <div class="menu">
       Hovering me should not make the row black
     </div>
  </div>
</div>

谢谢！

Answer 1

您可以使用一些 Javascript 来告诉 .menu 上的 mouseover 事件不要在其父级上传播。这是一个例子：

document
  .querySelector('.menu')
  .addEventListener('mouseover', e => { e.stopPropagation() })

.row {
  height: 52px;
  background: #F4F3D9;
  width: 100%;
  position: relative;
}

.row:hover {
  background: black;
}

.menu {
  height: 100px;
  width: 100px;
  background-color: green;
  position: absolute;
  z-index: 500;
}

<div class="container">
  <div class="row">
    <div class="menu">
      Hovering me should not make the row black
    </div>
  </div>
</div>