jquery - 鼠标移出后无法隐藏div

我想制作类似于Twitter的作者窗格的内容：将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>

问题是两方面的


鼠标移出后该框不会消失。
该框不会显示在页面上方（不会替换下一个div）


我该如何解决？

最佳答案

您也只能使用css进行此操作。悬停时只需display 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>