Question

我目前有一个表格，其中的列可能不会立即明显。如何将鼠标悬停说明文本添加到表格列标题？

例如，这将添加适当的鼠标悬停：

<span title="I am hovering over the text">Test</span>

但是当我将它添加到表格中时：

<table style="width:100%">
  <tr>
    <span title="I am hovering over the text"><th>Jill</th></span>
    <th>Smith</th>      
    <th>50</th>
  </tr>
</table>

鼠标悬停似乎不再适用。

Answer 1

将<span>元素放在<th>元素中。

<th><span title="I am hovering over the text">Jill</span></th>

DEMO：http://jsfiddle.net/80hvrfw7/

或者，只需将title属性放在th中即可摆脱span。

<th title="I am hovering over the text">Jill</th>

DEMO：http://jsfiddle.net/80hvrfw7/1/

请注意，表行（<tr>）元素只能将表格单元格（<td>）或表格标题（<th>）作为子元素。通过在代码中嵌套<span>作为<tr>的子项，您要求浏览器呈现无效的HTML，这可能会导致不可预测的行为。

考虑通过W3C Markup Validation Service运行您的HTML以检查错误。

Answer 2

只需将title属性添加到表头元素本身，span就不是绝对必要的了：

<th title="I am hovering over the text">Jill</th>

为什么没有标题属性用于鼠标悬停表头？

2 个答案: