I have created a unique set of graphs that unveil hidden text when hovered over with the mouse. To start, I carefully outlined the layout of my text:
<article class="fundamental_metrics">
<h2>Fundamental Metrics</h2>
<p id="number_of_transactions"></p>
<p id="total_transaction_volume"></p>
</article>
Here is the corresponding CSS styling:
.fundamental_metrics{
height: 100px;
width: 100px;
display: none;
z-index: 1;
}
Notice how the display property is set to none. Next, I implemented some JQuery code to enhance this feature:
$(document).ready ( function () {
$(document).on("mouseenter", "svg", function () {
console.log("mouse enter");
$(this).css("opacity","0.5");
$("#number_of_transactions").empty().append("Number of Transactions: " +10000);
$("#total_transaction_volume").empty().append("Total transaction volume: " + 1000);
$(this).append($(".fundamental_metrics").css("display","block"));
}).on('mouseleave', 'svg', function () {
console.log("mouse leave");
$(this).css("opacity", "1");
});
});
Despite correctly appending the article element to the parent class from the inspect menu, nothing seems to be visible on the screen.
https://i.sstatic.net/hU2rE.png
Take a closer look at the blue highlight area, where you can find the article tag with display: block. Initially, I suspected issues with the z-index, but even after adjusting it, the problem persists. Any suggestions?
EDIT: It's worth noting that the graphs are being generated using the D3.js library.