文本框'；弹出窗口'；CSS/Javascript的鼠标悬停/悬停显示

我有一个html

td

元素，里面有文本。我想要它，这样你就可以把鼠标悬停在那个元素上，在活动页面/元素的顶部显示一个文本框，解释td标签的内容是什么意思。某种形式的阐述。就像

标签一样

---

这可以用CSS或Javascript实现吗？

我以前用过。它运行得非常好，我认为这对您是有益的。

这可以通过CSS实现，也可以通过javascript实现。创建包含元素的表：

<table>
<tr><td>
    <a href="#">Info
        <div class="tooltipcontainer">
            <div class="tooltip">Here some info</div>
        </div>
    </a>
</td></tr>
</table>

当您将鼠标悬停在“Info”上时，它将在div中显示文本，并带有class='tooltip'。JavaScript（例如任何jQuery工具提示插件）具有具有更多选项的解决方案。

示例标记

<td id="1">..</td>
<td id="2">..</td>
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td>

你可以

$('#thisiswhatiwanttohaveahover').hover(function() {
  if ($(this + ' .tooltip').hasClass('hidden')) {
    $(this + ' .tooltip').removeClass('hidden');
    $(this + ' .tooltip').addClass('visible');
  }
  if ($(this + ' .tooltip').hasClass('visible')) {
    $(this + ' .tooltip').removeClass('visible');
    $(this + ' .tooltip').addClass('hidden');
  }
});

---

希望这有帮助。

这对可用性更好谢谢。这就是我一直在寻找的CSS解决方案。然而，我确实认为Javascript解决方案有更多的好处。

.visible {
  display:block;
}

.hidden {
  display:none;
}

$('#thisiswhatiwanttohaveahover').hover(function() {
  if ($(this + ' .tooltip').hasClass('hidden')) {
    $(this + ' .tooltip').removeClass('hidden');
    $(this + ' .tooltip').addClass('visible');
  }
  if ($(this + ' .tooltip').hasClass('visible')) {
    $(this + ' .tooltip').removeClass('visible');
    $(this + ' .tooltip').addClass('hidden');
  }
});