将图像悬停在页面上时如何使文本显示在页面上的设定位置答案

【问题标题】：How to make text appear in a set position on page when an image is hovered over将图像悬停在页面上时如何使文本显示在页面上的设定位置
【发布时间】：2014-12-29 04:32:23
【问题描述】：

我已经阅读了类似的答案，但不知道如何编辑它们以使用我自己的 html。我有一个表格，一旦鼠标悬停在表格中的某个单元格上，文本就会出现在页面右侧的一个白色框中。如果有人知道如何最好使用 Javascript 来解决这个问题（但任何可行的方法都会有所帮助）来让它工作，那就太好了。这是我的表格代码的 sn-p，我要执行所述事件的单元格有一个 ID="blue1"。

<tr>
<td>1</td>
<td id="blue1">
2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>

这是我希望文本出现的框：

<div id="whitebox">

<script type= text/javascript>


</script>
</div>

这是我希望在#blue1 悬停在#whitebox 上时出现的文本-

“2 点第二次与约翰见面”

我摆弄了各种代码，但无法正常工作。

【问题讨论】：

标签： javascript html html-table cell onmouseover

【解决方案1】：

您必须捕获.hover() 事件并使用.text() 附加文本。

$('#blue1').hover(function() {
  $('#whitebox').text('2nd Meet John at 2');
}, function() {
  $('#whitebox').text('whitebox');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td id="blue1">
      2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

<div id="whitebox">
  whitebox
</div>

脚本可以放在网站的<head> ... </head> 部分，使用：

<script type="text/javascript">
$(document).ready(function() {
  // script
});
</script>

【讨论】：

请检查我的编辑。 Jquery 库必须在脚本之前加载。
谢谢你的工作！你可以使用 onMouseOver 代替悬停吗？一旦鼠标离开我的单元格，我希望它消失
请检查我的编辑，您必须使用第二个 .hover() 参数来放回文本。