Home > Software design >  How to change stroke color when button was hovered in tailwind css
How to change stroke color when button was hovered in tailwind css

Time:06-29

I wanna ask something about how to change stroke color when button was hovered in tailwind, so I already made this code like this:

<button >
  <span>
    <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M7 1L1 7L7 13" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
  </span>
</button>

okey, in above my code is working no giving error or some weird things, but the problem is I don't know how to change the stroke of my svg when my button is hovered, I already try to make some piece of code to styling my stroke to change the color, and the code is like this:

<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1 1L7 7L1 13" stroke="#969696" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"  />
</svg>

everything is not okay in here, the problem is I must move my cursor on my svg to change the stroke but when I moving out my cursor from my svg only button change the background and my svg is not change the stroke, does anyone used to having problem like this? And how to solve this? I hope someone can explain this, before that thank you, oh ya I will attach the screenshot about my problem, so that everyone who read this getting more understand about my problem

  • Related