将鼠标悬停在父对象上时更改SVG多边形和文本填充颜色
我有一个正在努力解开的小谜题..当您将鼠标悬停在父div上时,尝试同时更改多边形填充颜色和文本填充颜色。这可以通过css实现吗?希望避免使用Java脚本并使其保持跨浏览器兼容。
代码示例如下:
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-BUTTON上时,我想不出如何将文本填充更改为白色...当您将鼠标悬停在文本上时,它会按预期工作,但当您将鼠标悬停在多边形上时,文本将隐藏。
解决方案
移动文本颜色更改以在父级组悬停状态时触发。
svg #cta-button:hover text{
fill: #fff;
}
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
#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>
相关文章