Html 悬停时文本更改时的SVG填充
我正在尝试在悬停时设置SVG动画,我希望文本在悬停时更改,我正在尝试使用纯css。基本上,您将鼠标悬停在圆形路径上,文本路径有一个名为css的类,该类更改其填充 这是一个 HTML:Html 悬停时文本更改时的SVG填充,html,css,svg,Html,Css,Svg,我正在尝试在悬停时设置SVG动画,我希望文本在悬停时更改,我正在尝试使用纯css。基本上,您将鼠标悬停在圆形路径上,文本路径有一个名为css的类,该类更改其填充 这是一个 HTML: .circle-1不是文本元素的父元素,而是同级元素,因此需要使用 .holder{ 宽度:300px; 高度:300px; } .圆圈-1{ 填充物:白色; } .circle-1:悬停{ 填充:紫色; } .正文{ 显示:块; } .alt文本{ 显示:无; } .circle-1:悬停~。主文本{ 显示:无
.circle-1
不是文本元素的父元素,而是同级元素,因此需要使用
.holder{
宽度:300px;
高度:300px;
}
.圆圈-1{
填充物:白色;
}
.circle-1:悬停{
填充:紫色;
}
.正文{
显示:块;
}
.alt文本{
显示:无;
}
.circle-1:悬停~。主文本{
显示:无;
}
.circle-1:悬停~.alt文本{
显示:块;
}
.cls-1{fill:#fff;}.cls-2.cls-3.cls-4{fill:#9b00f4;}.cls-3{字体大小:56.54px;}.cls-3.cls-4{字体系列:Raleway粗体,Raleway;字体重量:700;}.cls-4{字体大小:48.97px;}
1.
2.
.circle-1
不是文本元素的父元素,而是同级元素,因此需要使用
.holder{
宽度:300px;
高度:300px;
}
.圆圈-1{
填充物:白色;
}
.circle-1:悬停{
填充:紫色;
}
.正文{
显示:块;
}
.alt文本{
显示:无;
}
.circle-1:悬停~。主文本{
显示:无;
}
.circle-1:悬停~.alt文本{
显示:块;
}
.cls-1{fill:#fff;}.cls-2.cls-3.cls-4{fill:#9b00f4;}.cls-3{字体大小:56.54px;}.cls-3.cls-4{字体系列:Raleway粗体,Raleway;字体重量:700;}.cls-4{字体大小:48.97px;}
1.
2.
<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>
.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;
}