CODEWITHSUNDEEP
htmlcsssvg
janedoe
janedoe

Reputation: 937

Change svg color on hover or active

I have a button which uses an SVG image.

How do I get the fill color to work? Currently it's not working, and is showing the default SVG color which is black. Note that I can't use jQuery, and prefer to keep it to pure CSS/HTML if possible. Is there any way to change the svg fill color with only CSS/HTML?

Note: Below, local SVG file replaced with sample.

.modal-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 30px;
  font-size: 28px;
  fill: #777;
}

.modal-close:focus {
  outline: 0;
}

.modal-close:hover {
  fill: #41b97c;
}

.modal-close:active {
  background-color: #41b97c;
  fill: white;
}
<input type="image" src="//dev.w3.org/SVG/tools/svgweb/samples/svg-files/duck.svg" class="modal-close pull-right" aria-label="Close">

Upvotes: 0

Views: 6701

Answers (2)

hgg
hgg

Reputation: 1

<svg class="suchicon" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="#FACC2E"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>

.suchicon:active {
    fill: #585858;
}

.suchicon:hover {
    fill: #585858;
}

Upvotes: 0

jeh
jeh

Reputation: 577

You can't select the classes of the svg because it is being called as a static image. If you copy and paste your svg code directly into your HTML you can then use the classes within it with your css to apply different attributes like any other HTML element.

Upvotes: 2

Related Questions