悬停时更改背景SVG的笔触

Question

There is button with text and arrow image:

 button { background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #00aef4; border: 2px solid #00aef4; display: inline-block; font-weight: normal; line-height: 2.3; margin: 0; outline: 0; padding: 0 1em; text-align: center; vertical-align: middle; } .button:after { background: url("/svg/right-arrow.svg") no-repeat; content: ""; display: inline-block; height: 12px; margin-left: 10px; width: 8px; } .button:hover { background: #00aef4; color: #ffffff; } 

 <button class="button">Next</button> 

So, I need to change stroke color of arrow on hover without javascript. How to make it possible?

UPD Stackoverflow doesn't allow to add content svg-file. I publush it to gist: https://gist.github.com/bibimij/a5ae9dcc309db5547a31

Answer 1

without seeing your svg file you could just create a new image file with the colour you need?

background: url("/svg/right-arrow-hovercolor.svg") no-repeat;

Answer 2

I used svg to create an arrow try this

 button { background: #ffffff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #00aef4; border: 2px solid #00aef4; display: inline-block; font-weight: normal; line-height: 2.3; margin: 0; outline: 0; padding: 0 1em; text-align: center; vertical-align: middle; padding-right:30px; } .button svg{ transform:scale(.5,.5); position:absolute; margin-top:-45px; margin-left:5px; } .button:hover { background: #00aef4; color: #ffffff; } .button:hover svg path{ fill:#00aef4; stroke:white; 

 <button class="button">Next <svg width="50" height="60"> <path d=" m 0 20 30 0 0 -20 20 30 -20 30 0 -20 -30 0 "fill="white" stroke="#00aef4" stroke-width="2"/> </svg> </button>