Есть элемент (html код ниже), задача состояла в том чтобы при на ведении на тело элемента ("contacts--body"), менялся цвет фона, а также фон кнопки заполнялся цветом (реализовал через CSS). Но при наведении ещё и на кнопку (но только в момент действующего эффекта hover на "contacts--body"), цвет фона кнопки тоже должен менятся. Все реализовал, кроме изменения цвета фона кнопки, есть варианты как сделать? Проект загрузил на github ссылка ниже, нужный элемент в блоке "Get In Toch".
Пробовал через css (Работал c препроцесором SCSS) но почему-то не работает (не работает только изменение цвета фона кнопки).
ссылка: https://plupiks.github.io/adaptive-website/
<div class="contacts--body">
<div class="contacts--item">
<div class="contactc--image">
<svg class="contacts--icon" width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M68.3484 1.16199C67.9592 0.759029 67.4674 0.480035 66.9308 0.357809C66.3943 0.235584 65.8354 0.275208 65.3198 0.472024L1.8615 24.4708C1.31422 24.6867 0.84305 25.0706 0.51056 25.5716C0.178071 26.0726 0 26.6669 0 27.2756C0 27.8844 0.178071 28.4787 0.51056 28.9797C0.84305 29.4807 1.31422 29.8646 1.8615 30.0805L29.5524 41.5999L40.6287 70.3984C40.8368 70.9426 41.1935 71.4115 41.6549 71.7473C42.1162 72.0832 42.6619 72.2712 43.2248 72.2883C43.8077 72.2759 44.3733 72.08 44.847 71.7266C45.3207 71.3732 45.6804 70.8787 45.8785 70.3084L68.9542 4.31183C69.1507 3.78108 69.1981 3.20317 69.0909 2.64548C68.9836 2.08779 68.7261 1.5733 68.3484 1.16199ZM43.2248 60.8889L35.1771 39.89L48.9937 25.5207L44.9266 21.291L30.9946 35.7802L10.9187 27.2906L61.4834 8.30162L43.2248 60.8889Z"
fill="#0D5C63"
/>
</svg>
</div>
<a href="mailto:[email protected]" class="contacts--
link">[email protected]</a>
<a href="mailto:[email protected]" class="contacts--
link">[email protected]</a>
<div class="contacts--request">
<h4 class="contacts--title">Get Support</h4>
<button class="contacts-button">Submit Request</button>
</div>
</div>
</div>
.getintoch {
padding: 80px 0;
}
.getintoch--wrapper {
font-size: 2.5rem;
&>*:not(:last-child) {
margin-bottom: 80px;
}
}
.getintoch--header {
text-align: center;
}
.getintoch--contacts {
display: flex;
padding: 0 32.5px;
column-gap: 30px;
}
.contacts {
}
.contacts--body {
flex: 0 1 33.33333%;
padding: 50px 40px;
background: $white;
transition: all 275ms ease-out;
&:hover {
background: $darkBlue;
transform: scale(120%);
.contacts--icon path{
fill: #fff;
}
.contacts--link {
color: #fff;
}
.contacts--title {
color: #fff;
}
.contacts-button{
background: $orange;
color: #fff;
}
}
}
.contacts-buttons-hover {
background: red;
}
.contacts--item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
&>*:not(:last-child) {
margin-bottom: 15px;
}
}
.contacts--image {
width: 72px;
height: 72px;
}
.contacts--image svg {
width: 100%;
height: 100%;
}
.contacts--link {
@include fontSWCL (0.35em, 600, $darkBlue, 1.714);
}
.contacts--request {
}
.contacts--title {
@include fontSWCL (0.4em, 700, $darkBlue, 1.5);
}
.contacts-button {
border: 1px solid $orange;
box-sizing: border-box;
border-radius: 5px;
padding: 10px 20px;
background: transparent;
@include fontSWCL (0.35em, 600, $orange, 1.714);
cursor: pointer;
&:active {
background: #852b07;
}
}