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

Posted 2023-05-08

【中文标题】如何使用 jQuery 将“标题”属性转换为鼠标悬停事件？

【英文标题】：How do I convert a "title" attribute to a mouse over event with 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”标签中。

【参考方案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')