Как изменить фон блока при наведении на ссылку?

Question

[olchagmk]

Добрый день, есть код. Нужно сделать так, что-бы при наведении на ссылку"GET STARTED" фон .package-info стал белым. Как реализовать?
SCSS

<div class="package">
    						<div class="package-header">
    							10 hour package
    						</div>
    						<div class="package-info">
    							<p class="subtitle">
    								<span>Save 8%</span> on 10 hours of lessons 
    							</p>
    							<p class="title">
    								<span>&#8364;</span> 400.00
    							</p>
    							<a href="#">
    								Get started <i class="fas fa-long-arrow-alt-right"></i>
    							</a>
    							<img src="img/clock2.png" alt="">
    						</div>
    					</div>

.package {
					border-radius:10px;
					.package-header {
						background: linear-gradient(90deg, rgba(246,34,33,1) 0%, rgba(232,22,28,1) 50%, rgba(209,0,17,1) 100%);
						height: 95px;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 23px;
						@extend .bold;
						color: #fff;
						border-radius: 10px 10px 0px 0px;
						text-transform: uppercase;
					}
					.package-info {
						padding: 30px 60px 35px 35px;
						background: #f7f7f7;
						position: relative;
						border-radius: 0px 0px 10px 10px;
						.subtitle {
							font-size: 16px;
							color: #333;
							margin: 0 0 15px;
							span {
								@extend .semi-bold;
							}
						}
						.title {
							font-size: 30px;
							@extend .bold;
							position: relative;
							margin: 0 0 90px;
							span {
								font-size: 23px;
							}
							&:after {
								content: '';
								position: absolute;
								width: 58px;
								height: 1px;
								background: #f0f0f0;
								left: 0;
								bottom: -40px;
							}
						}
						a {
							text-transform: uppercase;
							@extend .semi-bold;
							i {
								color: #e3111a;
								margin: 0 0 0 22px;
							}
							&:hover {
								color: #e3111a;
							}
						}
						img {
							position: absolute;
							right: 18px;
							bottom: 25px;
							display: block;
						}
					}
				}

Answer 1

[Роман Дворянов]

CSS не умеет обратных селекторов на родителя, а SCSS скомпилируется в итоге все равно в CSS, чтоб можно было использовать состояние hover - элемент, который находится под этим состоянием должен быть или родителем или старшим соседом.

или

.el:hover > .children {
  ...
}

или

.el:hover + .el {
  ...
}

Чтоб сделать то, что вы хотите, вам нужно использовать или JS или менять архитектуру приложения таким образом, чтоб в потоке ссылка была или соседом выше или родителем.