title: Make svg polygon button with text change color on mouseover?
body: <p><a href="http://jsfiddle.net/J7psN/" rel="nofollow">http://jsfiddle.net/J7psN/</a></p>
  
  <pre><code>&lt;svg viewbox='0 0 80 80'&gt;
      &lt;polygon id=button points='50,0 80,80 0,80'/&gt;
      &lt;text x=40 y=50&gt;HELLO&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I have a polygon button with text on it and I want the polygon to get brighter when you hover over it. The problem is that when you hover over the text, the polygon goes back to dark.</p>
  
  <p>I'd prefer to use mostly html/css but I'm fine with using javascript/jquery as long as I don't need another library.</p>
  
  <p>I was hoping to do one of the following to solve it:</p>
  
  <ul>
  <li>Putting the text element inside the polygon element, but that isn't allowed. Can't nest elements in svg :(</li>
  <li>Using CSS to target the polygon when the text is hovered over, but you can't target the previous sibling. CSS can target next sibling but not previous :(</li>
  <li>Putting the text element before the polygon then use CSS next sibling to target the polygon when the text is hovered, but I can't use z-index on the text so you then can't ever see the text. No z-index support in svg :(</li>
  </ul>
  
  <p>I thought this would be simple... I've run into some annoying limitations.</p>