SVG填充悬停时的文本更改答案

【问题标题】：SVG fill on text change on hoverSVG填充悬停时的文本更改
【发布时间】：2018-10-25 21:58:32
【问题描述】：

我正在尝试在悬停时为 SVG 设置动画，我希望在悬停时更改文本，我正在尝试使用 pure css。基本上你将鼠标悬停在圆形路径上，文本路径有一个名为的 css 类来更改其填充。

HTML：

<div class="holder">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.36 170.36">
    <defs>
    <style>.cls-1{fill:#fff;}.cls-2,.cls-3,.cls-4{fill:#9b00f4;}.cls-3{font-size:56.54px;}.cls-3,.cls-4{font-family:Raleway-Bold, Raleway;font-weight:700;}.cls-4{font-size:48.97px;}</style>
    </defs>
    <circle class="circle-1" cx="960.15" cy="540.18" r="83.18" transform="translate(-1008.6 -46.45) rotate(-22.5)"/>
    <path class="cls-2" d="M960.15,459A81.18,81.18,0,1,1,879,540.18,81.28,81.28,0,0,1,960.15,459m0-4a85.18,85.18,0,1,0,85.18,85.18A85.18,85.18,0,0,0,960.15,455Z" transform="translate(-874.97 -455)"/>
    <text class="cls-3 main-text" transform="translate(73.19 99.05)">1</text>
    <text class="cls-4 alt-text" transform="translate(70.67 94.69) rotate(0.08)">2</text>
  </svg>
</div>

CSS：

.holder{
  width: 300px;
  height: 300px;
}
.circle-1{
  fill:white;
}
.circle-1:hover{
  fill:purple;
}
.main-text{
  display: block;
}
.alt-text{
  display:none;
}
/* Doesn't work */
.circle-1:hover .main-text{
  display:none;
}
.circle-1:hover .alt-text{
  display:block;
}

【问题讨论】：

标签： html css svg

【解决方案1】：

.circle-1 不是文本元素的父元素，而是兄弟，因此您需要使用sibling selector ~

.holder{
  width: 300px;
  height: 300px;
}
.circle-1{
  fill:white;
}
.circle-1:hover{
  fill:purple;
}
.main-text{
  display: block;
}
.alt-text{
  display:none;
}
.circle-1:hover ~ .main-text{
  display:none;
}
.circle-1:hover ~ .alt-text{
  display:block;
}

<div class="holder">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.36 170.36">
    <defs>
    <style>.cls-1{fill:#fff;}.cls-2,.cls-3,.cls-4{fill:#9b00f4;}.cls-3{font-size:56.54px;}.cls-3,.cls-4{font-family:Raleway-Bold, Raleway;font-weight:700;}.cls-4{font-size:48.97px;}</style>
    </defs>
    <circle class="circle-1" cx="960.15" cy="540.18" r="83.18" transform="translate(-1008.6 -46.45) rotate(-22.5)"/>
    <path class="cls-2" d="M960.15,459A81.18,81.18,0,1,1,879,540.18,81.28,81.28,0,0,1,960.15,459m0-4a85.18,85.18,0,1,0,85.18,85.18A85.18,85.18,0,0,0,960.15,455Z" transform="translate(-874.97 -455)"/>
    <text class="cls-3 main-text" transform="translate(73.19 99.05)">1</text>
    <text class="cls-4 alt-text" transform="translate(70.67 94.69) rotate(0.08)">2</text>
  </svg>
</div>

【讨论】：