Swiper не работает hover и a href?

Question

[MisterKyryl]

Пользуюсь swiper. У меня всего 4 слайда и только на последнем 4 слайде работает hover и a href "See project"
https://misterkyryl.github.io/Architecture/

<div class="card__slider swiper">
	<div class="card__wrapper swiper-wrapper">
		<article class="card__article article-card swiper-slide">
			<div class="article-card__container">
				<div class="article-card__content">
					<h3 data-swiper-parallax="500" class="article-card__sub-title">Architecture</h3>
						<h1 data-swiper-parallax="400" class="article-card__title">Relaxing Steep <br> Lake House</h1>
						<div class="article-card__button">
							<a href="" data-swiper-parallax="300" class="article-card__text">See Project</a>
							<a data-swiper-parallax="300" class="article-card__arrow">
								<img src="@img/arrow.svg" alt="Image">
							</a>
						</div>
					</div>
				</div>
				<div data-swiper-parallax="-300" class="article-card__image">
					<img src="@img/home-1.jpg" alt="Image">
				</div>
			</article>
			<article class="card__article article-card swiper-slide">
				<div class="article-card__container">
					<div class="article-card__content">
						<h3 data-swiper-parallax="500" class="article-card__sub-title">Architecture</h3>
						<h1 data-swiper-parallax="400" class="article-card__title">Luxury House <br> In The Forest</h1>
						<div class="article-card__button">
							<a data-swiper-parallax="300" href="" class="article-card__text">See Project</a>
							<a data-swiper-parallax="300" href="" class="article-card__arrow">
								<img src="@img/arrow.svg" alt="Image">
							</a>
						</div>
					</div>
				</div>
				<div data-swiper-parallax="-300" class="article-card__image">
					<img src="@img/home-2.jpg" alt="Image">
				</div>
			</article>
		</div>
	</div>

.article-card {
	position: relative;
	width: 100%;
	height: 100vh;
	// .article-card__container
	&__container {}
	// .article-card__content
	&__content {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		text-align: start;
		width: 100%;
		height: 100vh;
		padding-left: rem(50);
		z-index: 3;
		@media (max-width:$mobile) {
			text-align: center;
			align-items: center;
			padding-left: 0;
		}
	}
	// .article-card__sub-title
	&__sub-title {
		@include adaptiveValue("font-size", 24, 20);
		&:not(:last-child) {
			margin-bottom: em(25, 24);
		}
		@media (max-width:$tablet) {
			&:not(:last-child) {
				margin-bottom: em(10, 24);
			}
		}
	}
	// .article-card__title
	&__title {
		@include adaptiveValue("font-size", 64, 32);
		font-weight: 700;
		&:not(:last-child) {
			margin-bottom: em(40, 64);
		}
	}
	// .article-card__button
	&__button {
		display: inline-flex;
		align-items: center;
		column-gap: rem(8);
		font-weight: 600;
		transition: opacity .4s ease 0s;
		cursor: pointer;
		z-index: 5;
		@media (any-hover: hover) {
			&:hover {
				opacity: 0.7;
			}
		}
	}
	// .article-card__text
	&__text {}
	// .article-card__arrow
	&__arrow {
		img {
			width: rem(24);
			height: rem(24);
		}
	}
	// .article-card__image
	&__image {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			background-color: hsl(0, 0%, 0%, 0.2);
			z-index: 1;
		}
		img {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			object-fit: cover;
			object-position: center;
		}
	}
}

Answer 1

[Виталий Першин]

Он у тебя на всех работает, просто последний слайд идет поверх остальных и скрывается только при помощи opacity: 0;
Добавь ко всем неактивным слайдам pointer-events: none; или visibility: hidden;

Comments

[MisterKyryl]

Написал за неактивные слайды. Просто навесил z-index и зароботало

.swiper-slide-active {
	z-index: 2;
}