当按钮悬停在顺风css中时如何更改笔触颜色

Question

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 class="w-[3.125rem] h-[3.125rem] flex items-center justify-center rounded-full border-2 border-[#969696] hover:border-0 hover:bg-white">
  <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" class="hover:stroke-black" />
</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 😁

Answer 1

The solution to this should be tailwinds group-hover state as discussed in How to make parent div activate styling of child div for hover and active

Given that the solution could be something like this

<button class="group w-[3.125rem] h-[3.125rem] flex items-center justify-center rounded-full border-2 border-[#969696] hover:border-0 hover:bg-white">
  <span>
    <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" class="group-hover:stroke-black" />
    </svg>
  </span>
</button>

Notice the group and group-hover .