jquery - mouseout 后无法隐藏 div

Question

我想制作类似 Twitter 的作者 Pane 的东西:当 dropdown 区域悬停时，包含用户信息的框将附加到 atuhor-pane 并且鼠标移开时，框消失。

$(".dropdown").hover(function() {
  let athrDiv = $(this).children(".author-pane");
  let box = `<div class="box">I'm John'Doe's info box </div>`;
  athrDiv.empty();
  athrDiv.append(box);
});

$(document).on('mouseout', '.dropdown', function() {
  $(this).children(".box").empty();
});

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.box {
  background-color: yellow;
  border: 1px solid red;
  width: 200px;
  height: 200px;
  z-index: 1000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <strong class="author">John Doe</strong>

  <div class="author-pane">
  </div>
</div>

<div>Lorem ibsum</div>

问题有两点

1. mouseout 后框不会消失。
2. 框不会出现在页面上方(不会取代下一个 div)

我该如何解决这些问题？

Answer 1

您也可以只使用 css 来做到这一点。只需在悬停时显示 none & block。

.author:hover + .author-pane{display:block;}

$(".dropdown").hover(function() {
  let athrDiv = $(this).children(".author-pane");
  let box = `<div class="box">I'm John'Doe's info box </div>`;
  athrDiv.empty();
  athrDiv.append(box);
});

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.box {
  background-color: yellow;
  border: 1px solid red;
  width: 200px;
  height: 200px;
  z-index: 1000;
}

.author-pane {
  display: none;
  position: absolute;
  z-index: 1;
  right: -203px;
  top: 0px;
}

.dropdown:hover .author-pane {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <strong class="author">John Doe</strong>

  <div class="author-pane">
  </div>
</div>

<div>Lorem ibsum</div>