SVG-Polygon- und Textfüllfarben beim Schweben über Eltern verändern

Question

Ich habe ein kleines Rätsel, das ich zu lösen versuche .. versuche, sowohl eine Polygonfüllfarbe als auch eine Textfüllfarbe zu ändern, wenn du über das Elternteil divst . Ist das über CSS möglich? Möchte Javascript vermeiden und es über den Browser kompatibel halten.

Codepen Beispiel hier:

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> 

ich nicht herausfinden kann, wie der Text zu ändern, um weiß zu füllen, wenn Sie # cta-Taste schweben über ... es funktioniert wie erwartet, wenn Sie den Mauszeiger über den Text halten, der Text jedoch ausgeblendet wird, wenn Sie den Mauszeiger über das Polygon bewegen.

Answer 1

Verschieben Sie die Textfarbe ändern, um auf der übergeordneten Gruppe Gruppe Hover-Status auszulösen.

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>