在悬停上使用JQuery显示文本

Question

我有一些图表，当我将鼠标悬停在它们上面时，它们会显示一些文字。首先，我定义了我的文本结构：

<article class="basic_metrics">
    <h2>Basic Metrics</h2>
    <p id="number_of_loans"></p>
    <p id="total_loan_originated"></p>
</article>

使用以下css：

.basic_metrics{
    height: 100px;
    width: 100px;
    display: none;
    z-index: 1;
}

如您所见，显示为none。然后我有一些JQuery来帮助我完成这个功能：

          $(document).ready ( function () {
                $(document).on("mouseenter", "svg", function () {
                    console.log("mouse enter");
                    $(this).css("opacity","0.5");

                    $("#number_of_loans").empty().append("Number of Loans: " +10000);
                    $("#total_loan_origination").empty().append("Total loan originated: " + 1000);
                    $(this).append($(".basic_metrics").css("display","block"));


                }).on('mouseleave', 'svg', function () {
                    console.log("mouse leave");
                    $(this).css("opacity", "1");
                });
          });

然后从检查菜单中article确实正确地附加到父类，但没有显示任何内容。

浏览蓝色突出显示，您会注意到article标记display: block。我认为它与z-index有关，但我也补充说但是仍然无效。有什么想法吗？

编辑：图表由D3.js库生成。

Answer 1

从事件处理程序参数中删除svg，您的代码可以正常工作。

附注：在article中，您将第二段标识为total_loan_originated，但在您的JavaScript中，它被称为total_loan_origination

这里的working test fiddle不会附加到svg。

更新：文本框未正确删除。 This updated fiddle将其删除。