更改 hover 上 svg 图标的颜色？

Question

Hi I'm trying to have my svg icon change on hover, but it doesn't seem to work. Here's the html:

<icons>
    <a href="" ><svg className="facebook" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 112.196 112.196" ><g><circle style={{fill:'#FFFFFF'}} cx="56.098" cy="56.098" r="56.098"/><path style={{fill:'#1d1d20'}} d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z"/></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>         </a>         
    <a href=""><svg className="linkedin" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 112.196 112.196"><g><circle style={{fill: '#FFFFFF'}} cx="56.098" cy="56.097" r="56.098"/><g><path style={{fill: '#1d1d20'}} d="M89.616,60.611v23.128H76.207V62.161c0-5.418-1.936-9.118-6.791-9.118c-3.705,0-5.906,2.491-6.878,4.903c-0.353,0.862-0.444,2.059-0.444,3.268v22.524H48.684c0,0,0.18-36.546,0-40.329h13.411v5.715c-0.027,0.045-0.065,0.089-0.089,0.132h0.089v-0.132c1.782-2.742,4.96-6.662,12.085-6.662C83.002,42.462,89.616,48.226,89.616,60.611L89.616,60.611z M34.656,23.969c-4.587,0-7.588,3.011-7.588,6.967c0,3.872,2.914,6.97,7.412,6.97h0.087c4.677,0,7.585-3.098,7.585-6.97C42.063,26.98,39.244,23.969,34.656,23.969L34.656,23.969zM27.865,83.739H41.27V43.409H27.865V83.739z"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></a>
    <a href=""><svg className="github" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" ><path style={{fill:'#FFFFFF'}} d="M255.968,5.329C114.624,5.329,0,120.401,0,262.353c0,113.536,73.344,209.856,175.104,243.872c12.8,2.368,17.472-5.568,17.472-12.384c0-6.112-0.224-22.272-0.352-43.712c-71.2,15.52-86.24-34.464-86.24-34.464c-11.616-29.696-28.416-37.6-28.416-37.6c-23.264-15.936,1.728-15.616,1.728-15.616c25.696,1.824,39.2,26.496,39.2,26.496c22.848,39.264,59.936,27.936,74.528,21.344c2.304-16.608,8.928-27.936,16.256-34.368c-56.832-6.496-116.608-28.544-116.608-127.008c0-28.064,9.984-51.008,26.368-68.992c-2.656-6.496-11.424-32.64,2.496-68c0,0,21.504-6.912,70.4,26.336c20.416-5.696,42.304-8.544,64.096-8.64c21.728,0.128,43.648,2.944,64.096,8.672c48.864-33.248,70.336-26.336,70.336-26.336c13.952,35.392,5.184,61.504,2.56,68c16.416,17.984,26.304,40.928,26.304,68.992c0,98.72-59.84,120.448-116.864,126.816c9.184,7.936,17.376,23.616,17.376,47.584c0,34.368-0.32,62.08-0.32,70.496c0,6.88,4.608,14.88,17.6,12.352C438.72,472.145,512,375.857,512,262.353C512,120.401,397.376,5.329,255.968,5.329z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></a>
</icons>

Here's my CSS:

icons {
    display: grid;
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 50px;
    grid-gap: 10px;
    grid-template-areas: 'facebook linkedin github'

}

.facebook{
    grid-area: facebook;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.linkedin{
    grid-area: linkedin;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.github{
    grid-area: github;
    height: 40px;
    width: 40px;
    cursor: pointer;
}

I looked at other forms that said to use .facebook:hover , .linkedin:hover and so on but it doesn't seem to work. I'm also trying to change only the attribute color, but leave other attributes like alone. Any feedback on this would be appreciated!

Answer 1

One method is to handle color fills in your stylesheet instead of inline with the SVG image.

It's important to note that using CSS fills will override something like <path fill="#123456"... /> but not <path style="fill: #123456;"... /> . So in your case, you must remove the inline styles you have in various areas (ie style={{fill:'#FFFFFF'}} or this may not work as expected.

In place of the inline styles add classes and use these as identifiers in your stylesheet for the background and foreground colors. Then simply use standard :hover techniques to change the fill color.

Example using your Facebook SVG (stripped of unnecessary characters):

 icons { display: grid; grid-template-columns: 40px 40px 40px; grid-template-rows: 50px; grid-gap: 10px; grid-template-areas: 'facebook linkedin github' }.facebook { grid-area: facebook; height: 40px; width: 40px; cursor: pointer; }.fb-inner { fill: #fff; }.fb-outer { fill: #4267B2; }.facebook:hover.fb-outer { fill: red; }

 <a href=""> <svg class="facebook" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 112.196 112.196"> <g> <circle class="fb-outer" cx="56.098" cy="56.098" r="56.098" /> <path class="fb-inner" d="M70.201,58.294h-10.01v36.672H45.025V58.294h-7.213V45.406h7.213v-8.34c0-5.964,2.833-15.303,15.301-15.303L71.56,21.81v12.51h-8.151c-1.337,0-3.217,0.668-3.217,3.513v7.585h11.334L70.201,58.294z" /> </g> </svg> </a>

I grabbed the #4267B2 color from Facebook's brand guidelines and am using a generic red to demonstrate the background color change on hover. You can change the foreground color, if desired, by using the fb-inner class instead.

You can also learn more about SVG fills in this useful Codepen article .

Answer 2

Tried doing fill ?

.facebook:hover {
    svg{
        fill: red;
        path
        {
            fill: red;
        }
    }

}

try applying fill for svg tag only first, then else do for path also.