如何將懸停顏色添加到具有線性漸變邊框的div中？

Question

我正在嘗試將懸停顏色添加到此特定的div，但由於添加了漸變背景以使邊界半徑正常工作，因此無法正常工作。

我在使用css-modules的React Component中做到這一點。

這里有什么問題？ 我不是CSS方面的專家，但很想知道問題的原因以及如何解決這個問題。

 .card{ width: 40%; height: 150px; border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; border-radius:8px; display:inline-block; } .card:hover{ background-color: rgba(0,0,0,0.04); } 

 <div class="card"> No Hover color red <br/> I am doing this in React a small gist of the problem </div> 

更新資料

在添加了上述樣式后，我得到了相反的效果，即懸停處出現了邊框漸變顏色。如果添加此樣式，則得到了顏色，但是b階顏色消失了。

由於某些原因，漸變不接受具有如此低的不透明度的rgba，這是什么原因

.card:hover{
  background:
    linear-gradient(rgba(0,0,0,0.04),rgba(0,0,0,0.04)) padding-box;
} // no border color , when i change the color to rgba opacity it dosent work 

rgba（0,0,0,0.1）有效，但為什么不行rgba（0,0,0,0.04）

Answer 1

您可以這樣修復它：

.card:hover{
  background: red;
}

它會工作=）

或者，如果您想保留漸變邊框：

.card:hover{
      background: linear-gradient(red,red) padding-box, 
                  linear-gradient(125deg, #42E4A3, #A383E8) border-box;
    }

如果您需要半透明的背景色，則可以像這樣重新編輯您的解決方案（ Codepen上的演示 ）。 但是無論如何，由於半透明，您會在懸停底部的背景上看到。

Answer 2

在您的:hover樣式中，您應該使用邊框漸變重新定義background屬性，只需將白色#fff替換為新的red

 .card{ width: 40%; height: 150px; border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; border-radius:8px; display:inline-block; } .card:hover{ background: linear-gradient(red,red) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; } 

 <div class="card"> No Hover color red <br/> I am doing this in React a small gist of the problem </div>