Question

我正在尝试将悬停颜色添加到该特定的div中，但是由于添加了渐变背景以使边界半径正常工作，因此无法正常工作。

我正在使用CSS模块在React组件中做到这一点。

这是什么问题？我不是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;
    }

如果您需要半透明的背景色，则可以像这样（demo on 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>

如何将悬停颜色添加到具有线性渐变边框的div？

2 个答案: