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

您可以使用svg

来嵌套<g>的元素

<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();
});

<强> Updated Fiddle

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

2 个答案: