Question

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

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

如果我把它单独放置它可以工作，但当我把它放在表格标签中的任何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 });
        }
    });
});

Answer 2

Demo Link

试试这个：

$( "#outer" ).mouseenter(function() {
  $( ".csTip" ).append( "<div>Handler for .mouseenter() called.</div>" );
});

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

2 个答案: