<a> が動作しない。

すみません、つんでしまったのっでどなたかお助けいただけないでしょうか？
こちらのコードで<a>のリンクを出したいのですが、何をどうやってもボタンになってくれずホバーもかかってくれません。
何が原因なのでしょうか

html
1   <div class="hero">
2                <div class="hero_inner">
3
4                    <a class="btn" href="recruit.html">
5                        <div class="btn_recruit_inner">
6                           あああああああああ
7                            <span class="btn_recruit_tel">
8                                <img src="image/tel_icon.png" alt="TEL">
9                                0000000000000
10                            </span>
11                        </div>
12                        <img  class="arrow" src="image/arrow.png" alt="アロー">
13                    </a>
14                </div>
15            </div>

CSS
1
2.wrapper .hero {
3  background-image: url(../image/hero_top_image.svg);
4  padding-top: 40%;
5  background-size: contain;
6  background-repeat: no-repeat;
7  background-position: top 20% right -10%;
8  position: relative;
9}
10
11.wrapper .hero .hero_inner {
12  background-color: #c9171e;
13  position: absolute;
14  top: 10.47297vw;
15  width: 100%;
16  z-index: -5;
17  padding-top: 20%;
18}
19
20
21.wrapper .hero .hero_inner .btn {
22  width: 22.90541vw;
23  min-width: 170px;
24  background-color: #000;
25  display: -webkit-box;
26  display: -ms-flexbox;
27  display: flex;
28  -webkit-box-pack: center;
29      -ms-flex-pack: center;
30          justify-content: center;
31  -webkit-box-align: center;
32      -ms-flex-align: center;
33          align-items: center;
34  font-size: 1.35135vw;
35  color: #fff;
36  position: absolute;
37  top: 63%;
38  left: 16.14865vw;
39}
40
41.wrapper .hero .hero_inner .btn:hover {
42  opacity: 0.5;
43}
44
45.wrapper .hero .hero_inner .btn .btn_recruit_inner {
46  text-align: center;
47  padding: 1.35135vw;
48}
49
50.wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel {
51  display: -webkit-box;
52  display: -ms-flexbox;
53  display: flex;
54  -webkit-box-align: center;
55      -ms-flex-align: center;
56          align-items: center;
57  -webkit-box-pack: center;
58      -ms-flex-pack: center;
59          justify-content: center;
60}
61
62@media only screen and (max-width: 768px) {
63  .wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel {
64    display: none;
65  }
66}
67
68.wrapper .hero .hero_inner .btn .btn_recruit_inner .btn_recruit_tel img {
69  margin-right: 20px;
70}
71
72@media only screen and (max-width: 768px) {
73  .wrapper .hero .arrow {
74    display: none;
75  }
76}
77

m.ts10806

2021/01/29 21:09

scssよりコンパイル後のcssを提示されたほうが良いかと

DaisukeNomura

2021/01/29 22:36

すみません今準備します。。

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

回答1件

ベストアンサー

.wrapper .hero .hero_inner に z-index: -5; と設定しているため、.wrapper .hero の背面に隠れてしまっているため、.wrapper .hero .hero_innerの子孫要素もマウスイベントに反応しないようになってます。
このz-index: -5;を削除すれば<a>も反応するようになります。

投稿2021/01/30 01:14