CODEWITHSUNDEEP
csssvg
Mohamed Samy
Mohamed Samy

Reputation: 941

Change SVG Path Embedded into button

I can change the SVG Path very easily but when i insert it in button the css:hover is not working in firefox. Please check JSfiddle demo

CSS:

#Fill-1 {
  fill: red;
}
#Fill-1:hover {
  fill: black;
}

Upvotes: 0

Views: 193

Answers (2)

David Jenkins
David Jenkins

Reputation: 86

The button class doesn't seem to be messing anything up. You should try changing the css to point to Button instead of #Fill-1 and #Fill-2. They aren't needed.

button {fill:red}
button:hover {fill:black}

Upvotes: 0

Robert Longson
Robert Longson

Reputation: 124289

The button swallows the mouse events so the SVG never gets them. You can make hover work by targetting the hover to the button though. You'll need to ensure that the item you're targetting does not have an inline fill attribute so the button's fill can set it.

button {
     fill:red;
 }
button:hover {
     fill:black;
 }

like so

There is a Firefox bug that tracks this

Upvotes: 1

Related Questions