Question

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

我怎样才能做到这一点？

Answer 1

您可以轻松地将css样式分配给父级＆＃39; s上的元素：hover

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

Answer 2

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

＆＃13;

$('#parent').on('mouseleave', function() {
  $('#child').hide();
});

＆＃13;

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

＆＃13;

Answer 3

检查以下示例。

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

如果鼠标离开父级则隐藏元素

3 个答案: