title: How can I create an info box in HTML that shows information relevant to a hovered SVG path?
body: <p>I have an SVG with a couple paths that describe regions, like this:</p>
  
  <pre><code>&lt;svg&gt;
      &lt;g&gt;
          &lt;path d="..."&gt;&lt;/path&gt;
          &lt;path d="..."&gt;&lt;/path&gt;
          &lt;path d="..."&gt;&lt;/path&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And I'd like to display a <code>div</code> based on which <code>path</code> is hovered. I tried putting the respective <code>div</code>s inside the paths in order to be able to do this in the css:</p>
  
  <pre><code>path:hover div.infobox
  {
      display: block
  }
  
  div.infobox
  {
      display: none
      position: absolute
  }
  </code></pre>
  
  <p>But that doesn't work, because the SVG is not rendered properly if I hide non SVG elements in it.</p>
  
  <p>Is there an easy way to do this by CSS or with jQuery?</p>