リンクが効きません。

positionの指定が上手くできずに、リンクが効きません。

html
1<div class="glitch img01" >  
2   <p class="toptext">見出しテキスト<b>サブテキスト</b><a harf="#">リンクボタン</a></p>
3</div>

css
1.glitch
2  {
3    position: relative;
4    width: 100%;
5    height: 70vh;    
6  }
7
8.glitch:before
9  {
10    content: '';
11    position: absolute;
12    top: 0;
13    left: 0;
14    width: 100%;
15    height: 100%;    
16    opacity: .5;
17    mix-blend-mode: hard-light;
18    animation: glitch2 2s linear infinite;
19  }
20
21.glitch:hover:before
22{
23　　animation: glitch1 1s linear infinite;
24}
25
26@keyframes glitch1
27{
28	0%
29	{
30		background-position: 0 0;
31		filter: hue-rotate(0deg);
32	}
33	10%
34	{
35		background-position: 5px 0;
36	}
37	20%
38	{
39		background-position: -5px 0;
40	}
41	30%
42	{
43		background-position: 15px 0;
44	}
45	40%
46	{
47		background-position: -5px 0;
48	}
49	50%
50	{
51		background-position: -25px 0;
52	}
53	60%
54	{
55		background-position: -50px 0;
56	}
57	70%
58	{
59		background-position: 0 -20px;
60	}
61	80%
62	{
63		background-position: -60px -20px;
64	}
65	81%
66	{
67		background-position: 0 0;
68	}
69	100%
70	{
71		background-position: 0 0;
72		filter: hue-rotate(360deg);
73	}
74}
75
76@keyframes glitch2
77{
78	0%
79	{
80		background-position: 0 0;
81		filter: hue-rotate(0deg);
82	}
83	10%
84	{
85		background-position: 15px 0;
86	}
87	15%
88	{
89		background-position: -15px 0;
90	}
91	20%
92	{
93		filter: hue-rotate(360deg);
94	}
95  25%
96	{
97		background-position: 0 0;
98		filter: hue-rotate(0deg);
99	}
100  100%
101	{
102		background-position: 0 0;
103		filter: hue-rotate(0deg);
104	}
105}
106
107.toptext{
108　color: #fff;
109　width: 100%;
110　max-width: 220px;
111　position: relative;
112  top: 80%;
113  left: 50%;
114  -ms-transform: translate(-80%,-50%);
115  -webkit-transform: translate(-80%,-50%);
116  transform: translate(-80%,-50%);
117  margin:0;
118  padding:0;}
119
120.toptext b{
121　display: inline-block;
122　background: #000;
123　padding: 5px;
124　margin-top: 7px;
125　letter-spacing:0.3em;
126}
127
128.toptext a{
129　border: 2px solid #fff;
130　padding: 10px;
131  text-align: center;
132  display: block;
133  margin-top: 15px;
134}

.glitch:beforeが邪魔をしていると思うのですが、.toptext aにposition: relative;を追加しても改善しませんでした。

どうぞ、よろしくお願いいたします。

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

回答2件

いや、単にHTMLのa要素のhref属性を打ち間違えているだけなのでは。

Diff
1-   <a harf="#">サブテキスト</a>
2+   <a href="#">サブテキスト</a>

投稿2020/08/03 20:43

Daregada

総合スコア11990

回答編集しました。指定の通りの並び順で
リンクをクリックすることでグーグルに飛ぶようになっています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .glitch {
10            position: relative;
11            width: 100%;
12            height: 70vh;
13        }
14
15        .glitch:before {
16            content: '';
17            position: absolute;
18            top: 0;
19            left: 0;
20            width: 100%;
21            height: 100%;
22            opacity: .5;
23            mix-blend-mode: hard-light;
24            animation: glitch2 2s linear infinite;
25        }
26
27        .glitch:hover:before {
28            animation: glitch1 1s linear infinite;
29        }
30
31        @keyframes glitch1 {
32            0% {
33                background-position: 0 0;
34                filter: hue-rotate(0deg);
35            }
36
37            10% {
38                background-position: 5px 0;
39            }
40
41            20% {
42                background-position: -5px 0;
43            }
44
45            30% {
46                background-position: 15px 0;
47            }
48
49            40% {
50                background-position: -5px 0;
51            }
52
53            50% {
54                background-position: -25px 0;
55            }
56
57            60% {
58                background-position: -50px 0;
59            }
60
61            70% {
62                background-position: 0 -20px;
63            }
64
65            80% {
66                background-position: -60px -20px;
67            }
68
69            81% {
70                background-position: 0 0;
71            }
72
73            100% {
74                background-position: 0 0;
75                filter: hue-rotate(360deg);
76            }
77        }
78
79        @keyframes glitch2 {
80            0% {
81                background-position: 0 0;
82                filter: hue-rotate(0deg);
83            }
84
85            10% {
86                background-position: 15px 0;
87            }
88
89            15% {
90                background-position: -15px 0;
91            }
92
93            20% {
94                filter: hue-rotate(360deg);
95            }
96
97            25% {
98                background-position: 0 0;
99                filter: hue-rotate(0deg);
100            }
101
102            100% {
103                background-position: 0 0;
104                filter: hue-rotate(0deg);
105            }
106        }
107
108        .toptext {
109            color: black;
110            width: 30%;
111            max-width: 220px;
112            position: relative;
113            margin: 0 auto;
114            padding: 0;
115        }
116
117        .toptext b {
118            display: inline-block;
119            color: white;
120            background: #000;
121            padding: 5px;
122            margin-top: 7px;
123            letter-spacing: 0.3em;
124        }
125
126        .toptext a {
127            border: 2px solid #fff;
128            text-align: center;
129            display: inline-block;
130            margin-top: 15px;
131        }
132    </style>
133</head>
134
135<body>
136    <p class="toptext">見出しテキスト<b>サブテキスト</b><a href="https://www.google.com/">リンクボタン</a></p>
137</body>
138
139</html>

投稿2020/08/03 17:11

編集2020/08/04 00:07

Jon_do

総合スコア1373

toremy

2020/08/03 18:36

Jon_do様回答ありがとううございます。質問が不明瞭で申し訳ありません。 <p class="toptext">見出しテキスト<b>サブテキスト</b><a harf="#">リンクボタン</a></p> ↑リンクボタンの部分をリンクにしたいと思っております。表示としては見出しテキストサブテキスト【リンクボタン（CLICK）】のようなイメージです。ご教授いただいたCSSを適用しましたが、上手くいきませんでした…ｍ（＿）ｍ

Jon_do

2020/08/04 00:09

回答を編集しなおしました。こんな感じでしょうか？

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

リンクが効きません。

関連した質問