如果鼠标离开父级，隐藏元素答案

【问题标题】：Hide element if mouse leaves parent如果鼠标离开父级，隐藏元素
【发布时间】：2016-08-27 07:27:49
【问题描述】：

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

我怎样才能做到这一点？

【问题讨论】：

请添加相关代码。

标签： javascript jquery css events

【解决方案1】：

查看以下示例。

#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>

【讨论】：

我这种情况的内容是离开父母。当我在孩子身上，但不再在父母身上并离开绿色区域时，孩子不会隐藏。

【解决方案2】：

对于这个解决方案，我使用的是 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>

【讨论】：

【解决方案3】：

您可以轻松地将 css 样式分配给父元素 :hover 上的元素

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

【讨论】：