フェードインアニメーションつきのボタンリンクの飛び先変更

実現したいこと

CSSアニメーションを使い、テキストとボタンを載せた画像をフェードイン・フェードアウトで自動切り替えしたく、
リンク以外は実装できました。
が、ボタンのリンク先をそれぞれ別に飛ばしたいのですが
同じ場所に飛んでしまいます。

色々調べて、おそらくz-indexで重ねているせいで
一番上のレイヤーのリンク先に必ず飛んでしまうようなのですが
どのようにしたら良いでしょうか。

お知恵を拝借できますと幸いです。

ここに実現したいことを箇条書きで書いてください。

・自動切り替えするCSSアニメーションで、表示されているボタンのリンク先に飛ばしたい。

該当のソースコード(HTML)

<div class="home-Hero-container">
  <div class="home-Hero-wrapper">
    <div class="home-Hero-slide">
      <div class="s-three-wrap">
         <p class="s-three-outline">かざりテキスト１</p>
        <p class="s-three-text">メインテキスト１</p>
        <p class="s-three-sub">サブテキスト１</p>
        <a href="https://link1.html" class="s-three-button s-three-button01">ボタンテキスト1</a>
      </div>
    </div>
    <div class="home-Hero-slide">
      <div class="s-three-wrap">
        <p class="s-three-outline">かざりテキスト2</p>
        <p class="s-three-text">メインテキスト2</p>
        <p class="s-three-sub">サブテキスト2</p>
        <a href="https://greenth.co.jp/application/" class="s-three-button s-three-button02">ボタンテキスト2</a>
      </div>
    </div>
    <div class="home-Hero-slide">
      <div class="s-three-wrap">
        <p class="s-three-outline">かざりテキスト3</p>
        <p class="s-three-text">メインテキスト3</p>
        <p class="s-three-sub">サブテキスト3</p>
        <a href="https://greenth.co.jp/greenreskilling/" class="s-three-button s-three-button03">ボタンテキスト3</a>
      </div>
    </div>
  </div>

該当のソースコード(CSS)


/* スライダー全体 */
.home-Hero-wrapper{
	position: relative;
	display: flex;
	overflow: hidden;
	width: 100vw;
	height: calc(100vh - 155px);
	padding: 0 45px 0 15px;
	align-items: center;
}

/* スライダー背景画像 */
.home-Hero-slide{
	position: absolute;
	width: 100%;
	height:calc(100vh - 155px);
	inset: 0;
	aspect-ratio: 9/16;
	-o-object-fit: cover;
	object-fit: cover;
	background-repeat: no-repeat;
	background-size:cover;
}

/* スライダー背景画像だけ暗くする*/
.home-Hero-slide::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: inherit;
	filter: brightness(.6) saturate(70%);
}


/*レスポンシブ対応 */
@media screen and (max-width: 782px) {
	.home-Hero-slide {
	aspect-ratio: 16/9;
	height: 100%;
　　}
}


/*スライダー画像上の文字とボタン */

.s-three-wrap {
	position: absolute;
	 top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}



.s-three-outline{
		position: absolute;
　　z-index: -1;
	 top: -50%;
  left: 0%;
		 margin:3vw 0;
	font-family:'Arial Black', sans-serif; 
	  font-size: 5rem;
  font-weight: bold;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
		opacity: 0.5;
}


.s-three-text  {
  font-size: 5rem;
	 color:white;
	 margin:2vw 0;
}

.s-three-sub {
  font-size: 1.5rem;
  color:white;
	margin:2vw 0;
}

.s-three-button {
  top: 75%;
  left: calc( 50% - 75px );
  display: block;
  width: 300px;
  padding: 20px 10px;
  box-sizing: border-box;
  background: #99cf3e;
  color: white;
  text-align: center;
  text-decoration: none;
  transition: all .25s ease;
}

.s-three-button:hover {
  background: white;
  color: #99cf3e;
}


@media screen and (max-width: 782px) {
	.s-three-wrap {
	 top: 60%;
  left: 50%;
  }
	.s-three-outline{
		font-size:3rem;
	}
	.s-three-text  {
		font-size: 3rem;
	}
	.s-three-sub {
		font-size: 1rem;
	}
	.s-three-button {
		margin-top:30px;
	}
}



/*画像切り替えのアニメーション */
/*
  ①スライド画像
  表示する画像を定義
*/
.home-Hero-slide:nth-of-type(1){
		animation-delay: 0s;
  background-image: url(https://greenth.co.jp/wp-content/uploads/2023/04/slide01_2000x1320.jpg);
	z-index:2;
}

.home-Hero-slide:nth-of-type(2){
  animation-delay: 5s;
  background-image: url(https://greenth.co.jp/wp-content/uploads/2023/04/slide02_2000x1320.jpg);
	z-index:1;
}

.home-Hero-slide:nth-of-type(3){
  animation-delay: 10s;
  background-image: url(https://greenth.co.jp/wp-content/uploads/2023/04/slide03_2000x1320.jpg);
	z-index:0;
}





/*
  ②全体のアニメーション時間設定
*/
.home-Hero-slide {
		 animation: anime 15s infinite both;
	  opacity: 0;
}


/* アニメーション定義 */
@keyframes anime {
    0%{ opacity: 0;}
    20%{ opacity: 1;}
    33%{ opacity: 1;}
    63%{ opacity: 0;}
    100%{ opacity: 0;}

行動規範の内容に同意します

回答2件

ベストアンサー

pointer-events: none で実現できると思います。

css
1/*
2  ②全体のアニメーション時間設定
3*/
4.home-Hero-slide {
5  animation: anime 15s infinite both;
6  opacity: 0;
7  pointer-events: none;
8}
9
10/* アニメーション定義 */
11@keyframes anime {
12  0% { opacity: 0; pointer-events: none; }
13  20% { opacity: 1; pointer-events: auto; }
14  33% { opacity: 1; pointer-events: auto; }
15  63% { opacity: 0; pointer-events: none; }
16  100% { opacity: 0; pointer-events: none; }
17}