Html CSS&；jQuery-在不替换现有值的情况下向属性追加值

我有一些卡片都有不同颜色的背景线性渐变。鼠标移到上方时，我想覆盖一个半透明的白色背景，这样我可以放置一些弹出文本，同时保留下方的原始渐变。如何以自动化的方式完成此任务

我不想用暴力的方式：在每张卡片的CSS中添加一个

：悬停
，然后在初始
线性渐变（实际卡片颜色）之后添加第二个
线性渐变（rgba（255，255，255，0.3），rgba（255，255，255，0.3））

我想使用jQuery，但无法将其附加到background属性。它仅替换为新值

或代码如下：

<div class="card card--1">
  <p>
    Some text
  </p>
</div>
<div class="card card--2">
  <p>
    More text
  </p>
</div>
<div class="card card--3">
  <p>
    Even more text
  </p>
</div>

您不需要在每张卡上添加鼠标悬停。
您只需将其添加到.card即可

删除JQ代码并将以下内容添加到CSS中，它就可以工作了

.card:hover
{
  background: none;
  background-color: rgba(255, 255, 255, 0.3);
}

另一种方式

将JQ更改为：

$(document).ready(function() {

  $(".card").mouseenter(function() {
  $(this).addClass( "cardRollover" );
  })
  
    $(".card").mouseleave(function() {
  $(this).removeClass( "cardRollover" );
  })
  
});

添加到CSS：

.cardRollover{
   background: none;
  background-color: rgba(255, 255, 255, 0.3);
}

我还没有找到任何方法将线性渐变添加到现有的
背景：线性渐变
，因此我实现了一个解决方案-我添加了一个仅在悬停时显示的叠加div，其透明度为
0.5
和
可见性：隐藏

<div class="card card--1">
  <div class="card__hover"></div>
  <p>
    Some text
  </p>
</div>
<div class="card card--2">
  <div class="card__hover"></div>
  <p>
    More text
  </p>
</div>
<div class="card card--3">
  <div class="card__hover"></div>
  <p>
    Even more text
  </p>
</div>

另一个更复杂的方法是在每张牌上多放两个div。一个div用于正常背景颜色，另一个div用于翻转。当您滚动.card div时，它会隐藏（或将不透明度设置为0）div#1并显示div#2，然后滚动它会执行相反的操作。您确定这是按照我的要求进行的吗？当我尝试你的方法时，它不会在新叠加后保持原来的线性渐变。我不想用新颜色完全替换颜色，我想覆盖。你写的这条评论最接近于实际回答这个问题-我实现了一个类似的解决方案，但使用了不透明度：0.5，而不是从0切换到1。我感谢你的尝试，但这个答案和你的另一个答案一样，没有回答我的问题。这将使用新颜色完全替换背景色。我想在原始的线性渐变上叠加一种颜色。
.cardRollover{
   background: none;
  background-color: rgba(255, 255, 255, 0.3);
}

<div class="card card--1">
  <div class="card__hover"></div>
  <p>
    Some text
  </p>
</div>
<div class="card card--2">
  <div class="card__hover"></div>
  <p>
    More text
  </p>
</div>
<div class="card card--3">
  <div class="card__hover"></div>
  <p>
    Even more text
  </p>
</div>

.card {
  height: 50px;
  border-radius: 15px;
  position: relative;
  transition: 0.1s all;
  transform: translateY(0px);
  text-align: center;

  &:not(:first-child) {
    margin-top: 4rem;
  }

  &--1 {
    background: linear-gradient(0deg, #ffd66e, #ffeab2, #c8f8ff 80%);
  }

  &--2 {
    background: linear-gradient(11deg, #f5ac9c, #ffefe3);
  }

  &--3 {
    background: linear-gradient(18deg, #693b10, #fff5d3);
  }
}

.card__hover {
  position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        visibility: hidden;
}

$(document).ready(function() {
  $(".card").mouseenter(function() {
    $(this).children(".card__hover").css("visibility", "visible")
  })
  $(".card").mouseleave(function() {
    $(this).children(".card__hover").css("visibility", "hidden")
  })
});