CODEWITHSUNDEEP
htmlcsssvghover
ultraloveninja
ultraloveninja

Reputation: 2139

Anchor hover with inline SVG and text

Not sure how to accomplish this, but I have an SVG inline with some text wrapper in an anchor tag. But the SVG isn't changing color when hovering over the anchor as a whole, just the text. Once you hover over the SVG, it will change color, but I'm wondering how get to to trigger the hover state as a whole.

CSS:

    a, a svg {
    color: #fff;
    }

    a:hover {
      color: #111;
    }

    a svg:hover { 
      fill: #111;
    }

HTML:

<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>

I could have swore I've had this working somewhere else before not sure why it wouldn't work here.

Upvotes: 1

Views: 1308

Answers (2)

ccprog
ccprog

Reputation: 21821

Give the path an attribute fill="currentColor", and it will inherit the fill color from its parents.

a {
    color: #fff;
}

a:hover {
  color: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path fill="currentColor" d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>

Upvotes: 3

Peter
Peter

Reputation: 624

The fill color of your svg is showing by default #111 so you need to change the fill color of the svg normal state in your CSS. I don't know if you meant to have the text as white but you can obviously change that if you need to.

a, a svg {
	color: #fff;
	fill: #FF0000;
}

a:hover {
	color: #111;
}

a:hover svg {
	fill: #111;
}
<a href="https://facebook.com/username" target="_blank">FACEBOOK 
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
   <path d="M17.252,11.106V8.65c0-0.922,0.611-1.138,1.041-1.138h2.643V3.459l-3.639-0.015
    c-4.041,0-4.961,3.023-4.961,4.961v2.701H10v4.178h2.336v11.823h4.916V15.284h3.316l0.428-4.178H17.252z"/>
  </svg>
</a>

Upvotes: 1

Related Questions