如何使用 jQuery 将“标题”属性转换为鼠标悬停事件？答案

【问题标题】：How do I convert a "title" attribute to a mouse over event with jQuery?如何使用 jQuery 将“标题”属性转换为鼠标悬停事件？
【发布时间】：2010-09-14 23:49:27
【问题描述】：

我在“table”“td”元素中有一个“span”元素。 span 标签有一个 Title。

我想获取该 span 标签的标题并将其拉出以使其成为“td”元素的“鼠标悬停”提示。

例如：

我想转这个：

<td>
    <a href="#"><span id="test" title="Acres for each province">Acres</span></a>
</td>

进入这个：

<td onmouseover="tip(Acres for each province)">
    <a href="#"><span id="test">Acres</span></a>
</td>

编辑：我认为你们不明白。我正在尝试将 onmouseover 功能放入“td”标签中。我不是想把它放到“span”标签中。

【问题讨论】：

标签： jquery html

【解决方案1】：

根据您的编辑，您可以查看 jQuery 的 DOM 遍历方法：http://docs.jquery.com/Traversing

类似的东西（未经测试，我不声称它在语法上是正确的，这里只是一般的想法）......

$("td").each(function()
{
    $(this).mouseover(function()
    {
        tip($(this).children("span").attr("title"));
    });
});

【讨论】：

【解决方案2】：

类似：

$("span#test").mouseover( function () {
   tip($(this).attr("title"));
}

【讨论】：

【解决方案3】：

如果你不能在 td 上放置一个类或以某种方式选择它，那么首先选择跨度，然后转到跨度的祖父母并附加到鼠标悬停：

// get each span with id = test
$("span#test").each(function(){
    var $this = $(this);
    // attach to mouseover event of the grandparent (td)
    $this.parent().parent().mouseover( function () {
        tip($this.attr("title"));
    }
);

【讨论】：

【解决方案4】：

好的，我也试试：P

$("#yourTable").find("td").over(function()
  { generateTip($(this).find("span:first").attr("title") }
  , function() { removeTip() }
)

这是做什么的：

获取 id 为 yourTable 的表
选择所有的td
插入 mouseover 和 mouseout 事件
mouseover 事件：使用该 td 中第一个 span 的标题值调用 generateTip 函数
mouseout 事件：调用 removeTip()（可选）函数。

【讨论】：

【解决方案5】：

使用 jQuery：

$('#test').attr('title')

【讨论】：