I am trying to hide and unhide some html paragraph tag
when hovering over a component in SVG.
SVG (graphic.svg):
<svg height="300" width="300">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="styles.css" type="text/css"/>
<circle class="redcircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<circle cx="200" cy="200" r="40" stroke="green" stroke-width="3" fill="purple" />
</svg>
HTML:
<!DOCTYPE html>
<html>
<body>
<embed src="graphic.svg" />
<p class="item"> this is a hidden text, should only appear when hover over red circle</p>
</body>
</html>
CSS (styles.css):
.item {
display:none;
}
.redcircle:hover .item{
display:block;
}
The paragraph in the html is hidden so CSS is working fine. also the hover in SVG is working on its own but it is not making the paragraph visible in html.
Any help would be appreciated thanks.
