在 hover 上反应 svg 不改变颜色

Question

I am trying to make it so when you hover over the div containing an svg, that the svg changes color.

I have a total of 4 svg icons, and 3 of them work, but the second to last svg, for some reason, when I hover over it, does not change color, is it because my svg (below) is made up of multiple elements?

        {/* toggle open projects tab */}
        <a className="sidebarIcon" href="#">
          <svg
            className="sidebarSvg"
            width="50px"
            height="50px"
            version="1.0"
            viewBox="0 0 168.000000 149.000000"
          >
            <g
              transform="translate(0.000000,149.000000) scale(0.100000,-0.100000)"
              fill="#818181"
              stroke="none"
            >
              <path d="M1045 1433 c-88 -29 -168 -56 -177 -59 -16 -5 -18 2 -18 45 l0 51 -190 0 -190 0 0 -730 0 -730 190 0 190 0 0 677 c0 373 4 673 9 668 4 -6 42 -111 84 -235 91 -273 379 -1114 381 -1117 1 -1 81 23 178 54 l176 56 -135 396 c-74 218 -177 522 -230 676 -52 154 -98 285 -102 291 -4 8 -58 -6 -166 -43z"></path>
              <path d="M0 740 l0 -730 190 0 190 0 0 730 0 730 -190 0 -190 0 0 -730z"></path>
            </g>
          </svg>
        </a>

Code sandbox link: https://codesandbox.io/s/cranky-hooks-8hdktn?file=/src/App.js:182-193

Answer 1

remove the fill="#818181remove the fill="#818181remove the fill="#818181remove the fill="#818181