为啥背景过渡：linear-gradient() 在悬停时不起作用？
Posted
技术标签:
【中文标题】为啥背景过渡：linear-gradient() 在悬停时不起作用？【英文标题】：Why transition of background: linear-gradient() does not work on hover?为什么背景过渡：linear-gradient() 在悬停时不起作用？ 【发布时间】：2020-06-07 17:37:13 【问题描述】：这是我的代码：
有两件事不起作用
background: linear-gradient(); 悬停转换
已解决.col-md-9 中的 HERE 文本在悬停时应该是白色的，但它不起作用
.nqulay-sec-section .row:hover>.nqulay-sec-section .row .col-md-9
颜色：白色！重要；
.nqulay-sec-section .row
cursor: pointer;
background: linear-gradient(0deg, #E3EDF7, #E3EDF7);
box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8);
border-radius: 16px;
padding: 32px 60px;
margin-bottom: 60px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
.nqulay-sec-section .row:hover
background: linear-gradient(95.69deg, #33AEB7 0%, #3C3C81 100%);
box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8);
border-radius: 16px;
.nqulay-sec-section .row:hover>.col-md-3>svg>.st0
stroke: white !important;
/* HERE text inside .col-md-9 should be white on hover, but it does not work */
.nqulay-sec-section .row:hover>.nqulay-sec-section .row .col-md-9
color: white !important;
.nqulay-sec-section .row .col-md-9 h5
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 40px;
color: #3B4886 !important;
.nqulay-sec-section .row .col-md-9 p
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 32px;
color: #3B4886 !important;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="nqulay-sec-section p-5">
<div class="row firstbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 58" fill="none">
<path stroke="#3B4886" class="st0" opacity="0.9" d="M38.4519 53.4561L38.4529 53.4554C42.2279 50.7154 44.9429 47.2165 46.5873 42.9656C48.2755 38.7397 49.1153 34.0428 49.1153 28.8815C49.1153 23.8231 48.2747 19.2036 46.5854 15.0296C44.8871 10.8333 42.1463 7.36308 38.3739 4.62459C34.6306 1.86806 30.1265 0.5 24.8881 0.5C17.5682 0.5 11.6348 3.10926 7.13599 8.33529L7.13402 8.33759C2.69573 13.557 0.5 20.4482 0.5 28.9605C0.5 36.8468 2.59102 43.591 6.79396 49.1656L6.79536 49.1675C11.0315 54.732 17.0865 57.5 24.8881 57.5C30.1773 57.5 34.7077 56.1598 38.4519 53.4561ZM21.0599 15.0037L21.0666 14.9993L21.0732 14.9947C22.1016 14.2733 23.3643 13.9006 24.8881 13.9006C26.2898 13.9006 27.4801 14.2003 28.4772 14.7805C29.4737 15.3605 30.3052 16.2368 30.9652 17.4333C32.2972 19.8483 32.9942 23.6412 32.9942 28.8815C32.9942 34.0916 32.2782 37.9202 30.9041 40.4298C30.2212 41.6771 29.3813 42.5885 28.3932 43.19C27.4062 43.7909 26.2437 44.0994 24.8881 44.0994C22.1706 44.0994 20.164 42.9436 18.8059 40.5972C17.4237 38.2092 16.7015 34.5629 16.7015 29.5924C16.7015 28.0177 16.7282 26.6835 16.7813 25.5884L16.7814 25.5873C16.8335 24.4616 17.0167 23.0922 17.3355 21.4747L17.3361 21.4718C17.6516 19.8192 18.0935 18.5062 18.6485 17.5151C19.1947 16.54 19.9934 15.7019 21.0599 15.0037ZM91.5 1.55289V1.05289H91H77.6484H77.163L77.1486 1.53814C77.0459 5.01995 75.6176 7.77338 72.8454 9.84034C70.1025 11.8728 66.753 12.9006 62.7686 12.9006H61.2405H60.7405V13.4006V24.9323V25.4323H61.2405H73.7703V56.2891V56.7891H74.2703H91H91.5V56.2891V1.55289Z" />
</svg>
</div>
<div class="col-md-9">
<h5>Заполнить анкету</h5>
<p>Заполнить онлайн анкету</p>
</div>
</div>
<div class="row secondbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 59" fill="none">
<path stroke="#3B4886" class="st0" d="M102.8,42.5V57v0.5h-0.5h-48h-0.5V57v-1c0-2.5,0.3-4.9,1-7l0,0l0,0c0.7-2.2,1.7-4.2,3.1-6 c1.4-1.8,2.8-3.4,4.4-4.7c1.6-1.3,9.4-6.6,11.5-8.1 M102.8,43h-0.5l-14,0.1l0,0c-3,0-6.5,0.2-10.5,0.5c1.3-0.9,3.2-1.9,5.2-3.1 l0.7-0.4c3.1-1.7,4.5-2.5,5.6-3.3c2.1-1.4,3.8-2.6,4.9-3.5c1.2-0.9,2.5-2.1,3.8-3.5l0,0l0,0c1.4-1.5,2.3-3.2,2.9-5 c0.6-1.9,0.9-3.9,0.9-6.2c0-5.5-2.1-9.9-6.2-13.2c-4.1-3.4-9.6-5-16.3-5c-7.9,0-14,2-18.2,6.1c-4.1,4-6.2,9.9-6.2,17.5v0.9v0.5h0.5 h15h0.5v-0.5c0.1-3.2,0.7-5.6,1.8-7.3c1.1-1.6,3-2.5,6-2.5c2,0,3.4,0.5,4.5,1.4l0,0l0,0c1.1,0.8,1.6,2,1.7,3.6c0,1-0.2,1.9-0.6,2.7 c-0.4,0.7-1.1,1.5-2.2,2.3c-1,0.8-2.1,1.5-3.3,2.2c-1.2,0.7-2.9,1.6-5,2.9 M82.9,40.5L82.9,40.5 M38.3,54.1L38.3,54.1 c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14S42,7.4,38.2,4.7C34.5,1.9,30,0.5,24.8,0.5 c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0c4.2,5.6,10.2,8.4,18,8.4 C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9c1,0.6,1.8,1.5,2.5,2.7 c1.3,2.4,2,6.3,2,11.6s-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8s-2.1,0.9-3.5,0.9c-2.7,0-4.7-1.2-6-3.5 c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4C19.1,16.7,19.9,15.9,21,15.2z " />
</svg>
</div>
<div class="col-md-9">
<h5>Решение банка</h5>
<p>Узнать предварительное решение</p>
</div>
</div>
<div class="row thirdbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none">
<path stroke="#3B4886" class="st0" d="M97.2,51.9c-1.5,1.4-3.4,2.6-5.5,3.6l0,0c-2.1,0.9-4.2,1.6-6.4,2c-2.2,0.4-4.5,0.6-6.9,0.6 c-7.2,0-13.1-1.7-17.7-5.1l0,0c-4.6-3.5-6.9-8.7-6.9-15.5c0-0.6,0-1.1,0.1-1.6l0.1-0.4h0.4h15h0.5V36v0.8c0,2.5,0.7,4.3,1.9,5.5 c1.3,1.2,3.2,1.8,5.9,1.8c2.4,0,4.3-0.5,5.5-1.4c1.2-0.9,1.9-2.2,1.9-3.9c0-1.8-0.7-3.1-1.9-4c-1.3-0.9-3.7-1.3-6.6-1.3l-3.1,0H73 V33V22.7v-0.5l2.5,0.1l1.5,0.1c2.8,0,4.9-0.5,6.2-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1.7-0.6-3-1.9-3.9c-1.3-0.9-3.1-1.4-5.5-1.4 c-2.7,0-4.6,0.6-5.9,1.8c-1.3,1.2-1.9,3-1.9,5.5v0.8v0.5l-3.1,0l-11.5,0.2l0-0.5c0.3-6.5,2.4-11.4,6.6-14.6l0,0 c4.2-3.2,9.6-4.8,16.4-4.8C85,0.5,90.4,2,94.5,4.9c4.1,2.9,6.2,6.9,6.2,11.9c0,2.9-0.7,5.3-2.3,7.3 M98.4,24.1 C98.4,24.1,98.4,24.1,98.4,24.1 M98.4,24.1C98.4,24.1,98.4,24.1,98.4,24.1 M99.7,31.1C99.7,31.1,99.7,31.1,99.7,31.1 M99.7,31.1 C99.7,31.1,99.7,31.1,99.7,31.1 M98.4,24.1c-1.1,1.4-2.5,2.5-4.3,3.1c1.2,0.4,3.6,1.5,5.5,3.9c0.3,0.4,1.3,1.7,2,3.8 c0.6,1.9,0.7,3.4,0.7,4.6c0,2.6-0.5,5-1.4,7.2c-0.9,2.1-2.2,3.9-3.8,5.4 M97.2,51.9C97.2,51.9,97.2,51.9,97.2,51.9 M38.3,54.1 L38.3,54.1c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14c-1.7-4.2-4.4-7.8-8.2-10.5 C34.5,1.9,30,0.5,24.8,0.5c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0 c4.2,5.6,10.2,8.4,18,8.4C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9 c1,0.6,1.8,1.5,2.5,2.7c1.3,2.4,2,6.3,2,11.6c0,5.3-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8c-1,0.6-2.1,0.9-3.5,0.9 c-2.7,0-4.7-1.2-6-3.5c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4 C19.1,16.7,19.9,15.9,21,15.2z" />
</svg>
</div>
<div class="col-md-9">
<h5>Получить карту</h5>
<p>В магазинах партнеров или в любом отделении банка</p>
</div>
</div>
</section>【问题讨论】：
【参考方案1】：编辑你的 CSS 喜欢
.nqulay-sec-section .row .col-md-9 h5
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 40px;
color: #3B4886 !important;
.nqulay-sec-section .row .col-md-9 p
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 32px;
color: #3B4886 !important;
/* HERE text inside .col-md-9 should be white on hover, but it does not work */
.nqulay-sec-section .row:hover .col-md-9 h5, .nqulay-sec-section .row:hover .col-md-9 p
color: white !important;
.nqulay-sec-section .row
cursor: pointer;
background: linear-gradient(0deg, #E3EDF7, #E3EDF7);
box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8);
border-radius: 16px;
padding: 32px 60px;
margin-bottom: 60px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
.nqulay-sec-section .row:hover
background: linear-gradient(95.69deg, #33AEB7 0%, #3C3C81 100%);
box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8);
border-radius: 16px;
.nqulay-sec-section .row:hover .col-md-3 svg .st0
stroke: white !important;
.nqulay-sec-section .row .col-md-9 h5
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 40px;
color: #3B4886 !important;
.nqulay-sec-section .row .col-md-9 p
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 32px;
color: #3B4886 !important;
/* HERE text inside .col-md-9 should be white on hover, but it does not work */
.nqulay-sec-section .row:hover .col-md-9 h5, .nqulay-sec-section .row:hover .col-md-9 p
color: white !important;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="nqulay-sec-section p-5">
<div class="row firstbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 58" fill="none">
<path stroke="#3B4886" class="st0" opacity="0.9" d="M38.4519 53.4561L38.4529 53.4554C42.2279 50.7154 44.9429 47.2165 46.5873 42.9656C48.2755 38.7397 49.1153 34.0428 49.1153 28.8815C49.1153 23.8231 48.2747 19.2036 46.5854 15.0296C44.8871 10.8333 42.1463 7.36308 38.3739 4.62459C34.6306 1.86806 30.1265 0.5 24.8881 0.5C17.5682 0.5 11.6348 3.10926 7.13599 8.33529L7.13402 8.33759C2.69573 13.557 0.5 20.4482 0.5 28.9605C0.5 36.8468 2.59102 43.591 6.79396 49.1656L6.79536 49.1675C11.0315 54.732 17.0865 57.5 24.8881 57.5C30.1773 57.5 34.7077 56.1598 38.4519 53.4561ZM21.0599 15.0037L21.0666 14.9993L21.0732 14.9947C22.1016 14.2733 23.3643 13.9006 24.8881 13.9006C26.2898 13.9006 27.4801 14.2003 28.4772 14.7805C29.4737 15.3605 30.3052 16.2368 30.9652 17.4333C32.2972 19.8483 32.9942 23.6412 32.9942 28.8815C32.9942 34.0916 32.2782 37.9202 30.9041 40.4298C30.2212 41.6771 29.3813 42.5885 28.3932 43.19C27.4062 43.7909 26.2437 44.0994 24.8881 44.0994C22.1706 44.0994 20.164 42.9436 18.8059 40.5972C17.4237 38.2092 16.7015 34.5629 16.7015 29.5924C16.7015 28.0177 16.7282 26.6835 16.7813 25.5884L16.7814 25.5873C16.8335 24.4616 17.0167 23.0922 17.3355 21.4747L17.3361 21.4718C17.6516 19.8192 18.0935 18.5062 18.6485 17.5151C19.1947 16.54 19.9934 15.7019 21.0599 15.0037ZM91.5 1.55289V1.05289H91H77.6484H77.163L77.1486 1.53814C77.0459 5.01995 75.6176 7.77338 72.8454 9.84034C70.1025 11.8728 66.753 12.9006 62.7686 12.9006H61.2405H60.7405V13.4006V24.9323V25.4323H61.2405H73.7703V56.2891V56.7891H74.2703H91H91.5V56.2891V1.55289Z" />
</svg>
</div>
<div class="col-md-9">
<h5>Заполнить анкету</h5>
<p>Заполнить онлайн анкету</p>
</div>
</div>
<div class="row secondbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 59" fill="none">
<path stroke="#3B4886" class="st0" d="M102.8,42.5V57v0.5h-0.5h-48h-0.5V57v-1c0-2.5,0.3-4.9,1-7l0,0l0,0c0.7-2.2,1.7-4.2,3.1-6 c1.4-1.8,2.8-3.4,4.4-4.7c1.6-1.3,9.4-6.6,11.5-8.1 M102.8,43h-0.5l-14,0.1l0,0c-3,0-6.5,0.2-10.5,0.5c1.3-0.9,3.2-1.9,5.2-3.1 l0.7-0.4c3.1-1.7,4.5-2.5,5.6-3.3c2.1-1.4,3.8-2.6,4.9-3.5c1.2-0.9,2.5-2.1,3.8-3.5l0,0l0,0c1.4-1.5,2.3-3.2,2.9-5 c0.6-1.9,0.9-3.9,0.9-6.2c0-5.5-2.1-9.9-6.2-13.2c-4.1-3.4-9.6-5-16.3-5c-7.9,0-14,2-18.2,6.1c-4.1,4-6.2,9.9-6.2,17.5v0.9v0.5h0.5 h15h0.5v-0.5c0.1-3.2,0.7-5.6,1.8-7.3c1.1-1.6,3-2.5,6-2.5c2,0,3.4,0.5,4.5,1.4l0,0l0,0c1.1,0.8,1.6,2,1.7,3.6c0,1-0.2,1.9-0.6,2.7 c-0.4,0.7-1.1,1.5-2.2,2.3c-1,0.8-2.1,1.5-3.3,2.2c-1.2,0.7-2.9,1.6-5,2.9 M82.9,40.5L82.9,40.5 M38.3,54.1L38.3,54.1 c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14S42,7.4,38.2,4.7C34.5,1.9,30,0.5,24.8,0.5 c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0c4.2,5.6,10.2,8.4,18,8.4 C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9c1,0.6,1.8,1.5,2.5,2.7 c1.3,2.4,2,6.3,2,11.6s-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8s-2.1,0.9-3.5,0.9c-2.7,0-4.7-1.2-6-3.5 c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4C19.1,16.7,19.9,15.9,21,15.2z " />
</svg>
</div>
<div class="col-md-9">
<h5>Решение банка</h5>
<p>Узнать предварительное решение</p>
</div>
</div>
<div class="row thirdbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none">
<path stroke="#3B4886" class="st0" d="M97.2,51.9c-1.5,1.4-3.4,2.6-5.5,3.6l0,0c-2.1,0.9-4.2,1.6-6.4,2c-2.2,0.4-4.5,0.6-6.9,0.6 c-7.2,0-13.1-1.7-17.7-5.1l0,0c-4.6-3.5-6.9-8.7-6.9-15.5c0-0.6,0-1.1,0.1-1.6l0.1-0.4h0.4h15h0.5V36v0.8c0,2.5,0.7,4.3,1.9,5.5 c1.3,1.2,3.2,1.8,5.9,1.8c2.4,0,4.3-0.5,5.5-1.4c1.2-0.9,1.9-2.2,1.9-3.9c0-1.8-0.7-3.1-1.9-4c-1.3-0.9-3.7-1.3-6.6-1.3l-3.1,0H73 V33V22.7v-0.5l2.5,0.1l1.5,0.1c2.8,0,4.9-0.5,6.2-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1.7-0.6-3-1.9-3.9c-1.3-0.9-3.1-1.4-5.5-1.4 c-2.7,0-4.6,0.6-5.9,1.8c-1.3,1.2-1.9,3-1.9,5.5v0.8v0.5l-3.1,0l-11.5,0.2l0-0.5c0.3-6.5,2.4-11.4,6.6-14.6l0,0 c4.2-3.2,9.6-4.8,16.4-4.8C85,0.5,90.4,2,94.5,4.9c4.1,2.9,6.2,6.9,6.2,11.9c0,2.9-0.7,5.3-2.3,7.3 M98.4,24.1 C98.4,24.1,98.4,24.1,98.4,24.1 M98.4,24.1C98.4,24.1,98.4,24.1,98.4,24.1 M99.7,31.1C99.7,31.1,99.7,31.1,99.7,31.1 M99.7,31.1 C99.7,31.1,99.7,31.1,99.7,31.1 M98.4,24.1c-1.1,1.4-2.5,2.5-4.3,3.1c1.2,0.4,3.6,1.5,5.5,3.9c0.3,0.4,1.3,1.7,2,3.8 c0.6,1.9,0.7,3.4,0.7,4.6c0,2.6-0.5,5-1.4,7.2c-0.9,2.1-2.2,3.9-3.8,5.4 M97.2,51.9C97.2,51.9,97.2,51.9,97.2,51.9 M38.3,54.1 L38.3,54.1c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14c-1.7-4.2-4.4-7.8-8.2-10.5 C34.5,1.9,30,0.5,24.8,0.5c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0 c4.2,5.6,10.2,8.4,18,8.4C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9 c1,0.6,1.8,1.5,2.5,2.7c1.3,2.4,2,6.3,2,11.6c0,5.3-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8c-1,0.6-2.1,0.9-3.5,0.9 c-2.7,0-4.7-1.2-6-3.5c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4 C19.1,16.7,19.9,15.9,21,15.2z" />
</svg>
</div>
<div class="col-md-9">
<h5>Получить карту</h5>
<p>В магазинах партнеров или в любом отделении банка</p>
</div>
</div>
</section>【讨论】：
【参考方案2】：.nqulay-sec-section .row
cursor: pointer;
background: linear-gradient(0deg, #E3EDF7, #E3EDF7);
box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8);
border-radius: 16px;
padding: 32px 60px;
margin-bottom: 60px;
-moz-transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
.nqulay-sec-section .row:hover
background: linear-gradient(95.69deg, #33AEB7 0%, #3C3C81 100%);
box-shadow: 6px 2px 16px rgba(136, 165, 191, 0.48), -6px -2px 16px rgba(255, 255, 255, 0.8);
border-radius: 16px;
.st0
stroke: #3B4886
.nqulay-sec-section .row:hover svg>.st0
stroke: #fff;
/* HERE text inside .col-md-9 should be white on hover, but it does not work */
.nqulay-sec-section .row:hover>.nqulay-sec-section .row .col-md-9
color: white !important;
.nqulay-sec-section .row .col-md-9 h5
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 40px;
color: #3B4886;
.nqulay-sec-section .row .col-md-9 p
margin-bottom: 0;
font-family: HelveticaNeueCyr;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 32px;
color: #3B4886;
.nqulay-sec-section .row:hover .col-md-9 h5,.nqulay-sec-section .row:hover .col-md-9 p
color: #fff !important;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="nqulay-sec-section p-5">
<div class="row firstbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 58" fill="none">
<path stroke="#3B4886" class="st0" opacity="0.9" d="M38.4519 53.4561L38.4529 53.4554C42.2279 50.7154 44.9429 47.2165 46.5873 42.9656C48.2755 38.7397 49.1153 34.0428 49.1153 28.8815C49.1153 23.8231 48.2747 19.2036 46.5854 15.0296C44.8871 10.8333 42.1463 7.36308 38.3739 4.62459C34.6306 1.86806 30.1265 0.5 24.8881 0.5C17.5682 0.5 11.6348 3.10926 7.13599 8.33529L7.13402 8.33759C2.69573 13.557 0.5 20.4482 0.5 28.9605C0.5 36.8468 2.59102 43.591 6.79396 49.1656L6.79536 49.1675C11.0315 54.732 17.0865 57.5 24.8881 57.5C30.1773 57.5 34.7077 56.1598 38.4519 53.4561ZM21.0599 15.0037L21.0666 14.9993L21.0732 14.9947C22.1016 14.2733 23.3643 13.9006 24.8881 13.9006C26.2898 13.9006 27.4801 14.2003 28.4772 14.7805C29.4737 15.3605 30.3052 16.2368 30.9652 17.4333C32.2972 19.8483 32.9942 23.6412 32.9942 28.8815C32.9942 34.0916 32.2782 37.9202 30.9041 40.4298C30.2212 41.6771 29.3813 42.5885 28.3932 43.19C27.4062 43.7909 26.2437 44.0994 24.8881 44.0994C22.1706 44.0994 20.164 42.9436 18.8059 40.5972C17.4237 38.2092 16.7015 34.5629 16.7015 29.5924C16.7015 28.0177 16.7282 26.6835 16.7813 25.5884L16.7814 25.5873C16.8335 24.4616 17.0167 23.0922 17.3355 21.4747L17.3361 21.4718C17.6516 19.8192 18.0935 18.5062 18.6485 17.5151C19.1947 16.54 19.9934 15.7019 21.0599 15.0037ZM91.5 1.55289V1.05289H91H77.6484H77.163L77.1486 1.53814C77.0459 5.01995 75.6176 7.77338 72.8454 9.84034C70.1025 11.8728 66.753 12.9006 62.7686 12.9006H61.2405H60.7405V13.4006V24.9323V25.4323H61.2405H73.7703V56.2891V56.7891H74.2703H91H91.5V56.2891V1.55289Z" />
</svg>
</div>
<div class="col-md-9">
<h5>Заполнить анкету</h5>
<p>Заполнить онлайн анкету</p>
</div>
</div>
<div class="row secondbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 59" fill="none">
<path stroke="#3B4886" class="st0" d="M102.8,42.5V57v0.5h-0.5h-48h-0.5V57v-1c0-2.5,0.3-4.9,1-7l0,0l0,0c0.7-2.2,1.7-4.2,3.1-6 c1.4-1.8,2.8-3.4,4.4-4.7c1.6-1.3,9.4-6.6,11.5-8.1 M102.8,43h-0.5l-14,0.1l0,0c-3,0-6.5,0.2-10.5,0.5c1.3-0.9,3.2-1.9,5.2-3.1 l0.7-0.4c3.1-1.7,4.5-2.5,5.6-3.3c2.1-1.4,3.8-2.6,4.9-3.5c1.2-0.9,2.5-2.1,3.8-3.5l0,0l0,0c1.4-1.5,2.3-3.2,2.9-5 c0.6-1.9,0.9-3.9,0.9-6.2c0-5.5-2.1-9.9-6.2-13.2c-4.1-3.4-9.6-5-16.3-5c-7.9,0-14,2-18.2,6.1c-4.1,4-6.2,9.9-6.2,17.5v0.9v0.5h0.5 h15h0.5v-0.5c0.1-3.2,0.7-5.6,1.8-7.3c1.1-1.6,3-2.5,6-2.5c2,0,3.4,0.5,4.5,1.4l0,0l0,0c1.1,0.8,1.6,2,1.7,3.6c0,1-0.2,1.9-0.6,2.7 c-0.4,0.7-1.1,1.5-2.2,2.3c-1,0.8-2.1,1.5-3.3,2.2c-1.2,0.7-2.9,1.6-5,2.9 M82.9,40.5L82.9,40.5 M38.3,54.1L38.3,54.1 c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14S42,7.4,38.2,4.7C34.5,1.9,30,0.5,24.8,0.5 c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0c4.2,5.6,10.2,8.4,18,8.4 C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9c1,0.6,1.8,1.5,2.5,2.7 c1.3,2.4,2,6.3,2,11.6s-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8s-2.1,0.9-3.5,0.9c-2.7,0-4.7-1.2-6-3.5 c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4C19.1,16.7,19.9,15.9,21,15.2z " />
</svg>
</div>
<div class="col-md-9">
<h5>Решение банка</h5>
<p>Узнать предварительное решение</p>
</div>
</div>
<div class="row thirdbtn align-items-center">
<div class="col-md-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none">
<path class="st0" d="M97.2,51.9c-1.5,1.4-3.4,2.6-5.5,3.6l0,0c-2.1,0.9-4.2,1.6-6.4,2c-2.2,0.4-4.5,0.6-6.9,0.6 c-7.2,0-13.1-1.7-17.7-5.1l0,0c-4.6-3.5-6.9-8.7-6.9-15.5c0-0.6,0-1.1,0.1-1.6l0.1-0.4h0.4h15h0.5V36v0.8c0,2.5,0.7,4.3,1.9,5.5 c1.3,1.2,3.2,1.8,5.9,1.8c2.4,0,4.3-0.5,5.5-1.4c1.2-0.9,1.9-2.2,1.9-3.9c0-1.8-0.7-3.1-1.9-4c-1.3-0.9-3.7-1.3-6.6-1.3l-3.1,0H73 V33V22.7v-0.5l2.5,0.1l1.5,0.1c2.8,0,4.9-0.5,6.2-1.4c1.3-0.9,1.9-2.2,1.9-4c0-1.7-0.6-3-1.9-3.9c-1.3-0.9-3.1-1.4-5.5-1.4 c-2.7,0-4.6,0.6-5.9,1.8c-1.3,1.2-1.9,3-1.9,5.5v0.8v0.5l-3.1,0l-11.5,0.2l0-0.5c0.3-6.5,2.4-11.4,6.6-14.6l0,0 c4.2-3.2,9.6-4.8,16.4-4.8C85,0.5,90.4,2,94.5,4.9c4.1,2.9,6.2,6.9,6.2,11.9c0,2.9-0.7,5.3-2.3,7.3 M98.4,24.1 C98.4,24.1,98.4,24.1,98.4,24.1 M98.4,24.1C98.4,24.1,98.4,24.1,98.4,24.1 M99.7,31.1C99.7,31.1,99.7,31.1,99.7,31.1 M99.7,31.1 C99.7,31.1,99.7,31.1,99.7,31.1 M98.4,24.1c-1.1,1.4-2.5,2.5-4.3,3.1c1.2,0.4,3.6,1.5,5.5,3.9c0.3,0.4,1.3,1.7,2,3.8 c0.6,1.9,0.7,3.4,0.7,4.6c0,2.6-0.5,5-1.4,7.2c-0.9,2.1-2.2,3.9-3.8,5.4 M97.2,51.9C97.2,51.9,97.2,51.9,97.2,51.9 M38.3,54.1 L38.3,54.1c3.8-2.8,6.5-6.3,8.1-10.6c1.7-4.3,2.5-9,2.5-14.3c0-5.1-0.8-9.8-2.5-14c-1.7-4.2-4.4-7.8-8.2-10.5 C34.5,1.9,30,0.5,24.8,0.5c-7.3,0-13.2,2.6-17.7,7.9l0,0c-4.4,5.3-6.6,12.3-6.6,20.9c0,8,2.1,14.8,6.3,20.5l0,0 c4.2,5.6,10.2,8.4,18,8.4C30,58.2,34.5,56.9,38.3,54.1z M21,15.2L21,15.2L21,15.2c1-0.7,2.3-1.1,3.8-1.1c1.4,0,2.6,0.3,3.6,0.9 c1,0.6,1.8,1.5,2.5,2.7c1.3,2.4,2,6.3,2,11.6c0,5.3-0.7,9.2-2.1,11.7c-0.7,1.3-1.5,2.2-2.5,2.8c-1,0.6-2.1,0.9-3.5,0.9 c-2.7,0-4.7-1.2-6-3.5c-1.4-2.4-2.1-6.1-2.1-11.2c0-1.6,0-2.9,0.1-4.1l0,0c0.1-1.1,0.2-2.5,0.6-4.2l0,0c0.3-1.7,0.8-3,1.3-4 C19.1,16.7,19.9,15.9,21,15.2z" />
</svg>
</div>
<div class="col-md-9">
<h5>Получить карту</h5>
<p>В магазинах партнеров или в любом отделении банка</p>
</div>
</div>
</section>【讨论】：
以上是关于为啥背景过渡：linear-gradient() 在悬停时不起作用？的主要内容，如果未能解决你的问题，请参考以下文章
使用 PNG 背景为 UIButton alpha 设置动画：为啥动画从 alpha = 0 过渡到 alpha = 1 时会变成亮白色？