Изменение цвета полигона SVG и текста при наведении на родительский элемент

Question

У меня есть небольшая загадка, которую я изо всех сил пытаюсь решить... пытаясь заставить и цвет заливки многоугольника, и цвет текста измениться, когда вы наводите курсор на родительский div. Это возможно с помощью CSS? Хотелось бы избежать JavaScript и поддерживать его совместимость с разными браузерами.

Пример Codepen здесь:

http://codepen.io/okass/pen/OXAXkY

<svg viewBox="-1 -1 255 53"><a href="#">
<g id="cta-button">
  <polygon class="polygon-cta" points="252.72209 0 197.614579 51 0 51 0 0"></polygon>
  <text class="text-cta">
      <tspan x="22" y="34">Learn more</tspan>
  </text>
</g>
</a>

Я не могу понять, как изменить текстовую заливку на белый, когда вы наводите курсор мыши на кнопку #cta... она работает, как и ожидалось, когда вы наводите курсор на текст, но текст скрывается при наведении курсора на многоугольник.

Answer 1

Переместите изменение цвета текста, чтобы вызвать состояние наведения родительской группы.

svg #cta-button:hover text{
  fill: #fff;
}

#cta-button {
  fill: transparent;
  stroke: #e9004b;
}
svg text {
  font-weight: bold;
  font-size: 26px;
  font-family: lato;
  fill: #E9004B;
  stroke: none;
}
#cta-button:hover {
  fill: #e9004b;
}
svg #cta-button:hover text {
  fill: #fff;
}

<svg viewBox="-1 -1 255 53">
  <a href="#">
    <g id="cta-button">
      <polygon class="polygon-cta" points="252.72209 0 197.614579 51 0 51 0 0"></polygon>
      <text class="text-cta">
        <tspan x="22" y="34">Learn more</tspan>
      </text>
    </g>
  </a>
</svg>