在鼠标悬停时使用文本更改颜色制作svg多边形按钮？

Question

http://jsfiddle.net/J7psN/

<svg viewbox='0 0 80 80'>
    <polygon id=button points='50,0 80,80 0,80'/>
    <text x=40 y=50>HELLO</text>
</svg>

我有一个带有文本的多边形按钮，当你将鼠标悬停在它上面时，我希望多边形更亮。 问题是当您将鼠标悬停在文本上时，多边形会变回黑暗。

我更喜欢使用html / css，但只要我不需要另一个库，我就可以使用javascript / jquery。

我希望能够做到以下其中一项来解决它：

• 将文本元素放在多边形元素中，但不允许这样做。 无法在svg中嵌套元素:(
• 在文本悬停时使用CSS来定位多边形，但是您无法定位上一个兄弟。 CSS可以针对下一个兄弟而不是之前:(
• 将文本元素放在多边形之前然后使用CSS下一个兄弟来在文本悬停时定位多边形，但是我不能在文本上使用z-index，因此您无法看到文本。 svg中没有z-index支持:(

我觉得这很简单......我遇到了一些恼人的限制。

Answer 1

您可以使用<g>嵌套svg元素：

<svg viewbox='0 0 80 80'>
  <g id=button>
    <polygon points='50,0 80,80 0,80'/>
    <text x=40 y=50>HELLO</text>
  </g>
</svg>

然后应用CSS样式：

#button {
  cursor: pointer;
  fill: #900;
}

#button:hover {
  cursor: pointer;
  fill: #F00;
}

text {
  font-size:7px;
  fill: black;
}

请参阅： http ： //jsfiddle.net/J7psN/1/

Answer 2

您可以使用：

$( "#button" ).hover(
  function() {
    $(this).css('fill' ,'#F00');
  }, function() {
    $(this).css('fill' ,'#900');
  }
);

$('text').mouseover(function(e) {
    $(this).prev().mouseover();
});

更新小提琴