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具有显示在图标下方的较高值，但是我想要它们在旁边。任何问题将不胜感激。

Answer 1

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

具有相同值的“ top”属性在显示上有所不同

1 个答案: