疑似要素のhoverが反応しない

デベロッパーツール上ではhover時の反応は正しいのですが、キャッシュクリアしても実際に反応しません。
どなたかわかる方いらっしゃいましたら教えて頂けますと幸いです。

html
1<a href="#k-support" class="button">資料請求</a>

css
1.button{
2    display: block;
3    width: 180px;
4    margin: 0 auto 75px;
5    background-color: #ffa90d;
6    border-radius: 10px;
7    box-shadow: 0 6px 2px #bc780c;
8    text-align: center;
9    line-height: 50px;
10    font-size: 18px;
11    font-weight: bold;
12    color: #fff;
13    position: relative;
14}
15
16.button::after{
17    content: "";
18    position: relative;
19    top: 0;
20    left: 0;
21    width: 100%;
22    height: 100%;
23    background-color: #fff;
24    border-radius: 10px;
25    box-shadow: 0 6px 2px #fff;
26    opacity: 0;
27}
28
29.button:hover::after{
30    opacity: 0.5;
31}

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

回答1件

ベストアンサー

positionをrelativeではなくabsoluteにしましょう。

css
1.button::after{
2    position: absolute;
3}

投稿2020/08/24 02:26

root_jp

総合スコア4666

y_shigoto

2020/08/24 04:26

ご回答ありがとうございました。該当箇所は他の要素との兼ね合いでrelativeにしていたのですが、ここに影響を及ぼしていることに気付くことが出来て本当に助かりました。（デベロッパーツールでhover要素を選択すると、確かにrelativeの位置らしき箇所が反応していました…この時点で気付くべきですね…。）またご縁がございましたら何卒よろしくお願い致します。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

疑似要素のhoverが反応しない

関連した質問