javascript - 悬停文本并显示 html 表格

Question

所以基本上我想要一些文本在您将鼠标悬停在它上面时显示一个表格，我使用这个基本的 jquery/CSS 代码:

<meta charset="utf-8" />
<title></title>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script><script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="/resources/demos/style.css" rel="stylesheet" />
<script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
<style type="text/css">
label {
    display: inline-block;
    width: 5em;
  }</style>
<p>
    <a href="#" title="I want the below table to be hovered here">Table</a> to be hovered</p>

这是当您将鼠标悬停在文本上时我想显示的 HTML 表格:

HTML:

<table border="4" bordercolor="black" cellpadding="15px" cellspacing="1" style="width: 800px;">
    <tbody>
        <tr>
            <td>
                <h1>
                    <b style="list-style-type: disc; margin-left: 25px; margin-right:5px">This is my table</b></h1>
                <ul style="list-style-type: disc; margin-left: 40px; margin-right:5px">
                    <li>
                        <h1>
                            This is my first point</h1>
                    </li>
                    <li>
                        <h1>
                            This is my second point</h1>
                    </li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

我显然已经尝试用我的简单 HTML 表格替换我的“我希望下面的表格悬停在这里”，但它不起作用。所以我必须以某种方式调用表格，我可以将表格设置为 a 但无论如何我都无法正确调用它..

Answer 1

很简单:在您的 Html 中:添加一个 元素的 Id :

<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>

之后，为您的表格添加第二个元素的 Id，然后像这样隐藏他(with: style : display:none) :

<table id="myContentHover" border="4" bordercolor="black" cellpadding="15px"
       cellspacing="1" style="width: 800px;display:none">
    <!-- Your table content -->
</table>

最后，当您的“myHoverTitle”html 处于悬停状态时，仅使用 Jquery toolTip 的功能来显示您的表格:

$(function() {
    $( '#myHoverTitle' ).tooltip({ content: $('#myContentHover').html() });
});

此 Javascript 使用元素“myContentHover”的内容在您的元素“myHoverTitle”上创建一个“标题”!您拥有官方 JQueryUI 工具提示文档 here .

另外，你可以去掉元素的title属性的内容，它就没用了:

<a href="#" id="myHoverTitle" title="I want the below table to be hovered here">Table</a>

收件人:

<a href="#" id="myHoverTitle" title="">Table</a>

希望能帮到你。