gpt4 book ai didi

css - 当指针位于 svg 图标的任何元素上时保持鼠标悬停效果

转载 作者:太空宇宙 更新时间:2023-11-04 01:02:10 24 4
gpt4 key购买 nike

我有一个双色 svg 图标,想在鼠标悬停时更改它的颜色。

.icotop{
cursor:pointer;
position:relative;
width:30px;
height:30px;
}

.icotop > .fil0{
fill:#ccc;
}

.icotop > .fil1{
fill:white;
}

.icotop:hover{
fill:red; // doesn't work
}

.icotop .fil0:hover{
fill:red; // this works
}
<svg class='icotop' viewBox="0 0 1.99 1.99">
<path class="fil0" d="M1.8 1.99l-1.62 0 -0.05 -0.03c-0.06,-0.02 -0.1,-0.07 -0.12,-0.13 -0.02,-0.06 -0.01,-0.23 -0.01,-0.31l0 -0.9c0,-0.15 0,-0.15 0.08,-0.25 0.06,-0.07 0.24,-0.25 0.32,-0.31 0.06,-0.05 0.07,-0.04 0.1,-0.06l1.3 0c0,0 0,0 0.01,0 0.01,0.01 0.02,0.01 0.05,0.02 0.04,0.02 0.08,0.06 0.11,0.11 0.03,0.07 0.02,0.19 0.02,0.27l0 1.18c0,0.15 0.02,0.27 -0.09,0.36 -0.05,0.04 -0.07,0.03 -0.1,0.05z"/>
<path class="fil1" d="M1.52 1.07c0.03,0.01 0.05,0.03 0.05,0.06l0 0.48c-0.01,0.02 -0.03,0.04 -0.07,0.04 -0.26,0 -0.53,0 -0.8,0 -0.03,0 -0.21,0 -0.23,0 -0.03,-0.01 -0.05,-0.03 -0.05,-0.06 0,-0.04 0,-0.46 0,-0.48 0.01,-0.03 0.03,-0.04 0.07,-0.04 0.06,0 1.01,0 1.03,0z"/>
<path class="fil1" d="M1.52 0.28c0.06,0.02 0.05,0.07 0.05,0.12 0,0.05 0,0.29 0,0.31 -0.01,0.06 -0.08,0.05 -0.13,0.05 -0.04,0 -0.67,0 -0.7,0 -0.05,-0.02 -0.04,-0.07 -0.04,-0.12 0,-0.04 -0.01,-0.29 0,-0.31 0.01,-0.06 0.07,-0.05 0.12,-0.05 0.05,0 0.68,0 0.7,0z"/>
</svg>

问题是因为 fil0 的颜色在鼠标悬停在 fil1 上时变回。

那么当鼠标悬停在 icotop 的任何元素上时,如何更改 fil0 的颜色

最佳答案

.icotop{
cursor:pointer;
position:relative;
width:30px;
height:30px;
}

.icotop > .fil0{
fill:#ccc;
}

.icotop > .fil1{
fill:white;
}
/* This */
.icotop:hover .fil0{
fill:red;
}
/* instead of these */
.icotop:hover{
fill:red;
}

.icotop .fil0:hover{
fill:red;
}
/* end instead of these */
<svg class='icotop' viewBox="0 0 1.99 1.99">
<path class="fil0" d="M1.8 1.99l-1.62 0 -0.05 -0.03c-0.06,-0.02 -0.1,-0.07 -0.12,-0.13 -0.02,-0.06 -0.01,-0.23 -0.01,-0.31l0 -0.9c0,-0.15 0,-0.15 0.08,-0.25 0.06,-0.07 0.24,-0.25 0.32,-0.31 0.06,-0.05 0.07,-0.04 0.1,-0.06l1.3 0c0,0 0,0 0.01,0 0.01,0.01 0.02,0.01 0.05,0.02 0.04,0.02 0.08,0.06 0.11,0.11 0.03,0.07 0.02,0.19 0.02,0.27l0 1.18c0,0.15 0.02,0.27 -0.09,0.36 -0.05,0.04 -0.07,0.03 -0.1,0.05z"/>
<path class="fil1" d="M1.52 1.07c0.03,0.01 0.05,0.03 0.05,0.06l0 0.48c-0.01,0.02 -0.03,0.04 -0.07,0.04 -0.26,0 -0.53,0 -0.8,0 -0.03,0 -0.21,0 -0.23,0 -0.03,-0.01 -0.05,-0.03 -0.05,-0.06 0,-0.04 0,-0.46 0,-0.48 0.01,-0.03 0.03,-0.04 0.07,-0.04 0.06,0 1.01,0 1.03,0z"/>
<path class="fil1" d="M1.52 0.28c0.06,0.02 0.05,0.07 0.05,0.12 0,0.05 0,0.29 0,0.31 -0.01,0.06 -0.08,0.05 -0.13,0.05 -0.04,0 -0.67,0 -0.7,0 -0.05,-0.02 -0.04,-0.07 -0.04,-0.12 0,-0.04 -0.01,-0.29 0,-0.31 0.01,-0.06 0.07,-0.05 0.12,-0.05 0.05,0 0.68,0 0.7,0z"/>
</svg>

关于css - 当指针位于 svg 图标的任何元素上时保持鼠标悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53041691/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com