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

Question

我有一个双色 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>

问题是因为当鼠标移到fil1 时fil0 的颜色变回了fil1。

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

Answer 1

.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>

Answer 2

你需要改变 CSS 规则

.icotop:hover .fil0{ fill:red; // this works }