css - 悬停在 SVG 上更改颜色
问题描述
在下面的代码中,我想让眼睛和眉毛在悬停时改变颜色。如果您将鼠标悬停在左眼上,我可以让它工作,但不是右眼。右眼眉在悬停时也有一个奇怪的填充。我认为这与一般同级选择器~
不向后工作有关。这不是我的 SVG 代码,如果可能的话,我不知道如何组合眼睛。
.st6 {
fill: none;
stroke: #F3C3B3;
stroke-miterlimit: 10;
}
.st7 {
fill: #B88F7C;
stroke: #F3C3B3;
stroke-miterlimit: 10;
}
.st6:hover{
stroke:#d5b4a7;
}
.st7:hover{
stroke: #FFFFFF;
}
.st6:hover ~.st6{fill:#d5b4a7;}
.st6:hover ~ .st7{
fill:#d5b4a7;
stroke: #FFFFFF;
stroke-miterlimit: 10;
}
<svg version="1.1" id="BodyMap" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 257.9 872.3" style="enable-background:new 0 0 257.9 872.3;" xml:space="preserve">
<g id="Eyesbm">
<path id="Left_Eyebrow" class="st6" d="M99.7,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Left_Eye" class="st7" cx="110.5" cy="61.1" r="3.6"/>
<path id="Right_Eyebrow" class="st6" d="M135.8,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Right_Eye" class="st7" cx="146.7" cy="61.1" r="3.6"/>
</g>
</svg>
解决方案
那 ?
.st6, .st7 {
fill : none;
stroke : #F3C3B3;
stroke-miterlimit : 10;
}
.st7 {
fill : #B88F7C;
}
#Eyesbm:hover .st6 {
stroke :#d5b4a7;
}
#Eyesbm:hover .st7 {
stroke : #FFFFFF;
}
#Eyesbm:hover #Right_Eyebrow {
fill:#d5b4a7;
}
<svg version="1.1" id="BodyMap" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 257.9 872.3"
style="enable-background:new 0 0 257.9 872.3;" xml:space="preserve">
<g id="Eyesbm">
<path id="Left_Eyebrow" class="st6" d="M99.7,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Left_Eye" class="st7" cx="110.5" cy="61.1" r="3.6"/>
<path id="Right_Eyebrow" class="st6" d="M135.8,59.6c0,0,10.9-10.2,21.8,0"/>
<circle id="Right_Eye" class="st7" cx="146.7" cy="61.1" r="3.6"/>
</g>
</svg>
推荐阅读
- python - 从输入生成 Python 列表
- angular - kendoUI angular-如何制作单元格超链接
- entity-framework - Service Fabric 配置中的实体框架连接字符串
- java - 没有找到适合 createDirectStream 的方法
- sharepoint-2013 - 用于表单的带有 InfoPath 的 SharePoint O365
- python - python中的程序切片
- python - 我想在 Django Rest Framework 中获取 ForeignKey 的 url
- javascript - instance.render 不是 reactjs 中的函数错误
- javascript - Angular 6 setTimeout Module not found: Error: Can't resolve 'timers'
- javascript - Python相当于选择第一个非空参数