时间戳

首页 > 解决方案 > 如何将悬停颜色添加到具有线性渐变边框的 div？

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

问题描述

我正在尝试将悬停颜色添加到这个特定的 div，但它不起作用，因为添加了渐变背景以使边框半径工作。

我正在使用 css-modules 在 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)

标签： javascripthtmlcssreactjs

解决方案

在您的: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>

推荐阅读