It may seem like a minor issue, but I've encountered a small dilemma. I have SVG icons on my webpage that are supposed to reveal a hidden div when hovered over. While the first icon functions as expected, subsequent icons do not show the hidden div. After some investigation, I've found that the problem lies with the jQuery code, as the CSS (cursor: pointer;) still applies to each icon but the hidden div does not display. My question is, can I use multiple jQuery statements like the one below for each of my SVGs?
$(".div-g").hover(
function() {
$(this).find(".div-hidden").css("display","block");
},
function() {
$(this).find(".div-hidden").css("display","none");
}
);
For example, using the same statement but replacing "div" with "div1" and so forth for each SVG. I don't see any reason why this wouldn't work, yet it's not as straightforward as it was with the initial icon. To clarify, each of my SVGs has classes similar to the ones shown below
<rect style="display:none;" class="div-hidden div-hidden-rect" width="34.02" height="34.02"/>
<text style="display:none;" class="div-hidden" x="8" y="10">
and corresponding CSS like this
.div-g:hover {
text-align: center;
cursor: pointer;
}
.div-hidden {
text-anchor: middle;
text-align: center;
font-size: .5rem;
display: inline-block;
position: center;
}
.div-hidden-rect {
fill: $whiteblue;
opacity: .96;
}
where .div-g represents the SVG. So, is the issue stemming from using the same jQuery statement with different selectors, or is there something else at play that I'm overlooking?