jquery - 悬停效果在标签内不起作用

Question

我正在开发一个工具提示功能，我将鼠标悬停在一个图标上并根据其在 meesagebox 中的属性显示数据。以下代码用于 mouseenter 事件。

 <span class='csTip fa fa-info-circle' csTipTerm='Agreed Bid' ></span>

如果我独立地放置它，它可以工作，但是当我将它放在表格标签中的任何 TH 中时，它的悬停事件不起作用。下面是放入th之后的代码。

<th>Agreed Bid  <span class='csTip fa fa-info-circle' csTipTerm='Agreed Bid' ></span> </th>

脚本

$(".csTip").mouseenter(function () {
    var element = $(this);
    var term = element.attr("csTipTerm");
    $.ajax({
        url: "/api/help/gettipdetails",
        dataType: "json",
        data: {
            tipTerm: term
        },
        success: function (result) {
            var offsets = element.offset();
            var posTop = offsets.top;
            var posLeft = offsets.left;
            HelpBox(result.TipID, result.TipTitle, result.HelpDescriptionHTML, { left: posLeft, top: posTop - 200 });
        }
    });
});

有人可以指导一下吗？

Answer 1

试一试

$("table th .csTip").mouseenter(function () {
    var element = $(this);
    var term = element.attr("csTipTerm");
    $.ajax({
        url: "/api/help/gettipdetails",
        dataType: "json",
        data: {
            tipTerm: term
        },
        success: function (result) {
            var offsets = element.offset();
            var posTop = offsets.top;
            var posLeft = offsets.left;
            HelpBox(result.TipID, result.TipTitle, result.HelpDescriptionHTML, { left: posLeft, top: posTop - 200 });
        }
    });
});