當按鈕懸停在順風css中時如何更改筆觸顏色

Question

我想問一些關於當按鈕懸停在順風時如何改變筆觸顏色的問題，所以我已經編寫了這樣的代碼：

<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>

好的，在上面我的代碼沒有給出錯誤或一些奇怪的事情，但問題是我不知道如何在我的按鈕懸停時更改我的svg的筆划，我已經嘗試制作一些代碼來設置樣式我的中風改變顏色，代碼是這樣的：

<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>

在這里一切都不好，問題是我必須將光標移到我的svg上以更改筆畫，但是當我從我的svg僅按鈕移出光標時，更改背景並且我的svg沒有更改筆畫，有沒有人習慣有這樣的問題？ 以及如何解決這個問題？ 我希望有人能解釋一下，在此之前謝謝你，哦，我將附上我的問題的截圖，以便閱讀本文的每個人都能更了解我的問題😁

Answer 1

對此的解決方案應該是順風組懸停狀態，如如何使父 div 激活子 div 的樣式以進行懸停和活動中所述

鑒於解決方案可能是這樣的

<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>

注意group和group-hover 。