Change SVG polygon and text fill colours when hovering over parent

Question

I've a little puzzle that I'm struggling to solve.. trying to get both a polygon fill colour and text fill colour to change when you hover over the parent div. Is this possible via CSS? Would like to avoid javascript and keep it cross browser compatible.

Codepen example here:

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>

I can't figure out how to change the text fill to white when you hover over #cta-button...it works as expected when you hover over the text but the text is hidden when hovering over the polygon.

score 6 · Accepted Answer · answered Aug 10 '16 at 15:45

Move the text color change to trigger on the parent group hover state.

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>

Change SVG polygon and text fill colours when hovering over parent

1 Answers1

Linked