カレント表示の対応方法についてご教授お願い致します。また、先方が意図していることも私の経験値が浅い為にお伺いできましたら幸いです。

前提・実現したいこと

いつも大変お世話になっております。
御覧頂きありがとうございます。

現在、初仕事に取り組んでおります。ヘッダー作成しているのですが、ヘッダーに関して先方指示書が、
『hover色；＃ee6570
color:#fff
※カレント状態も同じとしてください』
とあります。

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

hoverはできましたが、カレント表示について具体的にどういう意図（指示）なのかわからないのと、
カレント表示に取り組みましたが適応できませんでした。

質問は下記３点です。
上記の指示は、1⃣CSSにてhover入力及びcurrent入力して対応するのでしょうか？
もしくは、2⃣hover+jQuery(add,remove)の対応でしょうか？　
それとも一方で、3⃣hover入力だけして対応すればいいんだよ、というお話でしょうか？

先方にお伺いさせて頂きましたが、まだ回答が来ずで心配になりました。
1⃣の対応をしました（以下添付）。しかしクリックしてなくても、常にカレント表示される状態になってしまいました。

該当のソースコード

【HTML】

【CSS】
.gnav{
display: flex;
justify-content: flex-end;
text-align: center;
margin-right: -20px;
font-size: 0;
align-items: center;
}
.gnav li{
font-size: 12pt;
line-height: 1;
height: 40px;
width: 120px;
background-color: #fff;
border-radius: 15px;
margin-right: 20px;
display: inline-block;
position: relative;
transition: all 0.5s;
border: 1px solid #5a5454;
}
.gnav li:hover{
background-color: #ef5e69;
}
.gnav li a:hover{
color: #fff;
}
.gnav li.current{
background-color: #ef5e69;
}
.gnav li a{
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 120px;
text-decoration: none;
color: hsl(0, 1%, 40%);
}

試したこと

<li class="current">をすべての<li>につけるのでしょうか？１つ目だけつけたところ、クリックしてなくても、常にカレント状態になりました。本やググるとこのようにコード記載ありますが私が間違っているのでしょうか？

質問３点とCSSカレント表示方法をご教授お願いできますでしょうか。
お手数をおかけし申し訳ございません。
宜しくお願い致します。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

1T2R3M4

2021/11/11 08:13 編集

上司同僚に相談できないのですか。また、第3者に開示することの了解は先方から得ていますか。

Lhankor_Mhy

2021/11/11 08:15

「カレント状態も同じとしてください」と書いてあるので、何もしなくていいと読めるのですが、違うのですか？

kirin0710

2021/11/11 08:22

いつもお世話になっております。フリーで活動しておりまして、※カレント状態も同じとしてください、以外の文言は全部変えています。特定不可かと存じます。心配ございませんが、もしご迷惑でしたら取り下げお願い致します。

kirin0710

2021/11/12 05:45

Lhankor＿Mhy様コメントありがとうございます。何もしなくてもいいと読めますね。先方に再度お伺いしてみます。またご縁がありますように！

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

回答2件

ベストアンサー

カレント表示は一般的にナビゲーションの現在の状態を表すことをいうと思いますので、こちらのデモのイメージが近いのではないかと思います。

html
1<ul class="gnav">
2  <li class="current"><a href="#">mein</a></li> 　　
3  <li><a href="#">ご案内</a></li>
4  <li><a href="#"> 料金</a></li>　　
5  <li><a href="#">アクセス</a></li>
6  <li><a href="#">アプリ</a></li>
7</ul>

css
1.gnav {
2  display: flex;
3  justify-content: flex-end;
4  text-align: center;
5  margin-right: -20px;
6  font-size: 0;
7  align-items: center;
8}
9
10.gnav li {
11  font-size: 12pt;
12  line-height: 1;
13  height: 40px;
14  width: 120px;
15  background-color: #fff;
16  border-radius: 15px;
17  margin-right: 20px;
18  display: inline-block;
19  position: relative;
20  transition: all 0.5s;
21  border: 1px solid #5a5454;
22  cursor: pointer;
23}
24
25.gnav li:hover,
26.gnav li.current {
27  background-color: #ef5e69;
28}
29
30.gnav li:hover a,
31.gnav li.current a {
32  color: #fff;
33}
34
35.gnav li a {
36  display: block;
37  position: absolute;
38  top: 50%;
39  left: 50%;
40  transform: translate(-50%, -50%);
41  width: 120px;
42  text-decoration: none;
43  color: hsl(0, 1%, 40%);
44}

js
1const navItems = document.querySelectorAll(".gnav li");
2
3for (const navItem of navItems) {
4  navItem.addEventListener("click", (event) => {
5    for (const navItem of navItems) {
6      navItem.classList.remove("current");
7    }
8    
9    event.currentTarget.classList.add("current");
10  })
11}