CSSでhoverが効かないのですがどうしたらいいでしょうか

前提・実現したいこと

hoverした際にアニメーションがつくようにしたいです。

発生している問題・エラーメッセージ

Chromeで実行すると、もはやhoverすらしないです。（マウスアイコンに変化がない）
aタグで記述しており、数時間前まではhoverしていたのですが、他のコードを修正しているうちに
いつの間にか消えていました・・・
他のスタイルは適用されているのですが・・・

該当のソースコード

HTML
1<nav>
2          <ul>
3            <li>
4              <a href="">
5                TOP
6              <span>トップページ</span>
7              </a>
8            </li>
9            <li>
10              <a href="">
11                SERVICE
12                <span>事業内容</span>
13              </a>
14            </li>
15            <li>
16              <a href="">
17                ABOUT US
18                <span>会社案内</span>
19              </a>
20            </li>
21            <li>
22              <a href="">
23                WORKS
24                <span>事例紹介</span>
25              </a>
26            </li>
27            <li>
28              <a class="btn" href="">
29                お問い合わせ
30              </a>
31            </li>
32          </ul>
33        </nav>

CSS
1nav ul {
2  display: flex;
3  flex-flow: row;
4  justify-content:space-between;
5  width: 100%;
6}
7
8nav li a {
9  padding: 10px 15px;
10  text-decoration: none;
11  color: #ffffff;
12  letter-spacing: 1px;
13  position: relative;
14  display: inline-block;
15}
16
17nav li a:hover::after {
18  transform: scale(1, 1);
19}
20
21nav li a::after {
22  position: absolute;
23  bottom: 0;
24  left: 0;
25  content: '';
26  width: 100%;
27  height: 2px;
28  background: #9c501f;
29  transform: scale(0, 1);
30  transform-origin: left top;
31  transition: transform .3s;
32  display: block;
33}
34
35
36
37nav li a span {
38  display: block;
39  text-align: center;
40  font-size: 60%;
41  padding-top: 10px;
42}
43
44.btn {
45  display: block;
46  width: 160px;
47  height: 30px;
48  outline: none;
49  background-color: transparent;
50  border: 2px solid #fff; 
51  line-height: 30px;
52  text-align: center;
53  color: #fff;
54  text-decoration: none;
55  transition: .4s;
56}
57.btn:hover {
58  background-color: rgba(255, 255, 255, .2);
59}

補足情報

サブライムテキストで記述していますが、CSSの他の部分には行の表示の部分に
まとまりを示す▼が出てくるのにhoverの部分だけ出てきません。

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

回答3件

自己解決

こちらの質問ですが、要素の検証をしてみたところ、hover自体は効いていて、背景のz-indexを-4に設定していたことでhoverが隠れてしまっていた？ことが原因のようでした・・・。皆さまありがとうございました。

投稿2018/04/29 02:31

AnnaSenzaki

総合スコア8

サブライムテキストで記述していますが、CSSの他の部分には行の表示の部分に

まとまりを示す▼が出てくるのにhoverの部分だけ出てきません。

CSSの記述に問題があるのではないでしょうか。
気付きづらいのは以下のようなものですかね・・確認してみてください。

・全角の空白が含まれている
・セミコロン「;」やコロン「:」の打ちミス

解決しなければ、そんなに行数無いので一度記述し直してみるとよいかもしれません。

投稿2018/04/28 12:43

編集2018/04/28 12:45

退会済みユーザー

総合スコア0

AnnaSenzaki

2018/04/28 13:14

ご回答ありがとうございます！記述し直してみたんですがやはり効かないみたいです。ナビゲーション以外の部分にも（普通にpタグのところとか）hoverを適用させようとしてみたのですが、効かなかったです・・・。

退会済みユーザー

2018/04/28 13:21

AnnaSenzakiさんが記述されたコードをそのままコピーして確認すると、hoverで要素下部に左からアニメーションで線が描画されます。これ以外に記述があるのであれば、この部分以外を消していき、どの時点でうまく動くか確認するとよいと思います。また、ほかのコメントにもあるようにキャッシュを削除してみると改善することがあります。

AnnaSenzaki

2018/04/29 02:30

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

文字色が白になっているのでhoverになっているかわからないだけなような気がしますがどうでしょうか。

html
1nav li a {
2  padding: 10px 15px;
3  text-decoration: none;
4  color: #ffffff;
5  letter-spacing: 1px;
6  position: relative;
7  display: inline-block;
8}
9

のcolor: #ffffff;
を消したら、特に問題なさそうに見えます。

----- 以下追記

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>JSオブジェクト</title>
6    <style>
7nav ul {
8  display: flex;
9  flex-flow: row;
10  justify-content:space-between;
11  width: 100%;
12}
13
14nav li a {
15  padding: 10px 15px;
16  text-decoration: none;
17/*  color: #ffffff;*/
18  letter-spacing: 1px;
19  position: relative;
20  display: inline-block;
21}
22
23nav li a:hover::after {
24  transform: scale(1, 1);
25}
26
27nav li a::after {
28  position: absolute;
29  bottom: 0;
30  left: 0;
31  content: '';
32  width: 100%;
33  height: 2px;
34  background: #9c501f;
35  transform: scale(0, 1);
36  transform-origin: left top;
37  transition: transform .3s;
38  display: block;
39}
40
41
42
43nav li a span {
44  display: block;
45  text-align: center;
46  font-size: 60%;
47  padding-top: 10px;
48}
49
50.btn {
51  display: block;
52  width: 160px;
53  height: 30px;
54  outline: none;
55  background-color: transparent;
56  border: 2px solid #fff; 
57  line-height: 30px;
58  text-align: center;
59  color: #fff;
60  text-decoration: none;
61  transition: .4s;
62}
63.btn:hover {
64  background-color: rgba(255, 255, 255, .2);
65}
66
67    </style>
68</head>
69<body>
70<nav>
71    <ul>
72        <li>
73            <a href="">
74                TOP
75                <span>トップページ</span>
76            </a>
77        </li>
78        <li>
79            <a href="">
80                SERVICE
81                <span>事業内容</span>
82            </a>
83        </li>
84        <li>
85            <a href="">
86                ABOUT US
87                <span>会社案内</span>
88            </a>
89        </li>
90        <li>
91            <a href="">
92                WORKS
93                <span>事例紹介</span>
94            </a>
95        </li>
96        <li>
97            <a class="btn" href="">
98                お問い合わせ
99            </a>
100        </li>
101    </ul>
102</nav>
103</html>