When hovering, the block disappears, what to do?

Question

JavaScript

Has a like button

<button type="button" onmouseenter="$('#likebox2').show()" onmouseleave="$('#likebox2').hide()"><i class="icon icon-heart"></i> 1</button>

and the block with users who set like is initially hidden

<div id="likebox2" class="likebox">
    <div class="likebox-header">
      1 пользователю это понравилось
    </div>
    <a href="http://localhost/2" style="float: left; padding: 5px; cursor: pointer;" title="@jamesbraga">
      <img alt="image" src="http://localhost/uploads/profile/24f79d14f9a71eac65dc330832883cc2.jpeg" height="32px" width="32px">
    </a>
  </div>

The essence of the problem is this, when I hover over the button, then when I try to go to the block with users who like it, it disappears. How to make it so that it does not disappear when moving to this block, but disappears only when the pointer is outside the block or outside the block and the button itself.

Answer 1

You have 0.7 seconds to target #likebox.
jsfiddle.net/fzdw5fj8/1