javascript - 使用 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 确实正确地附加到父类，但没有显示任何内容。

环顾蓝色高亮部分，您会注意到带有 display: block 的 article 标签。我认为它与 z-index 有关，但我也添加了它但仍然不起作用。有什么想法吗？

编辑: 这些图表是由 D3.js 生成的图书馆。

Answer 1

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

旁注:在您的文章中，您将第二段标识为total_loan_originated，但在您的 JavaScript 中，它称为 total_loan_origination.

这是一个 working test fiddle不会附加到 svg。

更新:文本框没有被正确删除。 This updated fiddle将其删除。