如果鼠标离开父对象，则隐藏元素

Hide element if mouse leaves parent

本文关键字：隐藏 元素 对象 鼠标 离开 如果      更新时间：2023-09-26

我有两个div，比如说父级是100*100px小。当用户悬停在父对象上时，会出现一个包含内容的小弹出窗口（绝对位于一侧）。这个div就像一个工具提示，是100pxdiv的子级。现在，当用户离开父级div时，子级应该被隐藏——即使鼠标离开父级100px*100px区域。

我怎样才能做到这一点？

您可以轻松地将css样式分配给父级：悬停上的元素

.tooltip {
    display: none;
}
:hover .tooltip {
    display: block;
}

对于这个解决方案，我使用JQuery

$('#parent').on('mouseleave', function() {
  $('#child').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">Child Text</div>
  Parent Text
</div>

查看下面的示例。

#parent {
  width: 100px;
  height: 100px;
  background-color: palegreen;
}
#child {
  position: absolute;
  display: none;
  background-color: green;
  color: white;
}
#parent:hover #child {
  display: block;
}
#parent:hover #child:hover {
  display: none;
}
<div id="parent">
  <div id="child">
    some content for the popup
  </div>
</div>

相关文章：