javascript - "top"相同值的属性显示不同

Question

我有一些社交图标，我放了一个 div，它的可见性是隐藏的，我想在每个图标悬停时显示它。我在下面编写了 jQuery 代码并且运行良好，我使用 console.log 查看 event.pageY 和 top 属性何时可见，它们是一样的:

$(function() {
  $('.social-icons a img').hover(function(event) {
    var socialIconName = $(this).data('name');
    var Y = event.clientY;
    var DOMTarget = $('#social-icon-text');

    DOMTarget.text(socialIconName);
    DOMTarget.css({
      'top': Y,
      'visibility': 'visible'
    });

  }, function(event) {
    $('#social-icon-text').css('visibility', 'hidden');
  });
});

我的 HTML 代码:

<div class="social-icons">
    <a href="#"><img src="Images/GitHub.png" alt="GitHub" data-name="GitHub"></a>
    <a href="#"><img src="Images/Instagram.png" alt="Instagram" data-name="Instagram"></a>
    <a href="#"><img src="Images/Telegram.png" alt="Telegram" data-name="Telegram"></a>
    <a href="#"><img src="Images/Twitter.png" alt="Twitter" data-name="Twitter"></a>
    
    <div id="social-icon-text">Instagram</div>
</div>

这是我的 CSS:

#social-icon-text {
  background-image: linear-gradient(120deg, #D4FC79 0%, #96E6A1 100%);
  color: #555;
  position: absolute;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 3px;
  top: 0;
  left: 120%;
  text-shadow: -1px 1px 5px rgba(0, 0, 0, .25);
  visibility: hidden;
}

#social-icon-text::before {
  content: "";
  width: 0;
  height: 0;
  border-right: 5px solid #D4FC79;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
}

My problem image

我的问题是当 div 出现时，虽然 pageY 和 top 属性相同但是 div具有更高的值(value)，显示在图标下方，但我希望它们并排在一起。 我们将不胜感激。

Answer 1

我使用了 position 方法及其 top 属性，而不是更改 pageX 值。