Не могу спрятать div после mouseout

Question

Я хотел бы сделать что-то похожее на панель автора в Твиттере: когда область 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. Поле не исчезает после наведения мыши.
2. окно НЕ появляется НАД (без смещения следующего div)

Как это исправить?

Answer 1

Вы можете сделать это, используя только 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>

Answer 2

Это потому, что mouseover заботится о событиях входа и выхода из мыши. Ознакомьтесь с документацией jQuery :

Привязать один или два обработчика к соответствующим элементам, которые будут выполняться, когда указатель мыши входит и выходит элементов.

Вы должны указать действия, которые вы хотите для каждого события:

$(".dropdown").on({
    mouseenter: 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);    
    },
    mouseleave: function() {
      $(this).find(".author-pane").empty();    
    }
}
);

Answer 3

Вам нужно передать две функции в событие наведения мыши 1. для отображения сведений о наведении в 2. для удаления сведений о наведении

Кроме того, используйте $(function(){...}, чтобы убедиться, что DOM полностью загружен и ваш скрипт jqueryполучает все необходимые элементы

$(function(){
    $(".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);
   }, function(){
      let athrDiv = $(this).children(".author-pane");      
      athrDiv.empty();
   });
  
});

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

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