使用JQuery在懸停上顯示文本

我有幾張圖表，當我將鼠標懸停在它們上面時，它們會顯示一些文本。首先，我定義我的文字的結構：使用JQuery在懸停上顯示文本

<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指數有關，但我也補充說，但仍然無效。有任何想法嗎？

編輯：該圖正在由D3.js庫生成。

來源

2017-07-19 anderish

嘗試改變位置，可能是在屏幕上的某處 – tech2017

您是否嘗試過使用ID而不是類文章？只是想知道是否可能附加一個類元素列表而不僅僅是一個元素。 – freginold

只是試圖改變立場。仍然沒有找到的地方。我用'd3.js'生成了這些圖形。 – anderish

從事件處理程序參數中刪除svg並且您的代碼有效。

旁註：在你article，你必須確定爲total_loan_originated第二段，但在你的JavaScript，這就是所謂的total_loan_origination。

這裏是一個working test fiddle，不會追加到svg。

更新：文本框未被正確刪除。 This updated fiddle將其刪除。

來源

2017-07-19 14:15:25 freginold

仍然無法正常工作。這是否有助於這些圖形由'd3.js'庫生成？ – anderish

這可能與它有關。如果你拿出''svg''參考，它看起來像是有效的。我現在正在嘲弄小提琴。 – freginold

@anderish看看[this fiddle]（https://jsfiddle.net/4wj5a51g/1/）...如果從事件處理程序中刪除'svg'參數，則文本將按預期顯示。 – freginold

使用JQuery在懸停上顯示文本

回答

相關問題