css – Hide HTML content by hovering over some SVG element

html - Animation after toggling doesn't apply the second style

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" />


  <!DOCTYPE html>
     <embed src="graphic.svg" />
     <p class="item"> this is a hidden text, should only appear when hover over red circle</p> 

CSS (styles.css):

.item {
.redcircle:hover .item{

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.

Source link

Leave a reply

Please enter your comment!
Please enter your name here