当图像悬停在图像上时,如何使文本显示在页面上的设置位置

时间:2014-11-02 11:12:49

标签: javascript html html-table cell onmouseover

我已经阅读了类似的答案,无法弄清楚如何编辑它们以使用我自己的HTML。我有一张桌子,一旦鼠标悬停在表格中的某个单元格上,文本就会出现在页面右侧的白色框中。如果有人知道如何使用Javascript优先(但任何有效的东西将帮助)让这个工作,这将是伟大的。这是我的代码表的一小部分,我要执行的单元格的事件有一个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>  

这是我想在#whitebox中出现的文字#blue1悬停在 -

“第二次见到约翰2”

我已经摆弄了各种代码,无法让它发挥作用。

1 个答案:

答案 0 :(得分:1)

您必须抓住.hover()事件并使用.text()附加文字。

&#13;
&#13;
$('#blue1').hover(function() {
  $('#whitebox').text('2nd Meet John at 2');
}, function() {
  $('#whitebox').text('whitebox');
});
&#13;
<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>
&#13;
&#13;
&#13;

脚本可以使用以下内容放置在网站的<head> ... </head>部分:

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