マウスオーバー時、複数の要素が1つの要素と認識される。個別の要素として認識させたい。

前提

ProgateでHTML/CSSを学習中です。
現在、復習のためにProgateの演習で作成したサイトの模写コーディングを行っています。
・演習で作成したサイト→リンク

上記リンク先の模写を行っています。

リンク先にあるサイトのヘッダー右側の3つのリンク**（レッスン、新規登録、ログイン）**部分がカーソルを合わせると白く表示されます。個別に設定したはずの3つのリンク部分が結果的に1つのリンクと認識されている（？）状態です。

###実現したいこと

上記で述べた、現在3つで1リンクと指定されているであろう状態をそれぞれ3つ**（レッスン、新規登録、ログイン）**が独立したリンクとして指定したいです。回答をお待ちしております。

「レッスン」にカーソルを合わせた時「レッスン、新規登録、ログイン」の全てが白く表示される→NG

「レッスン」にカーソルを合わせた時に「レッスン」だけ白く表示される→OK

######現在の誤りのある状態

|レッスン|新規登録|ログイン|
| 　　リンク　　　 |

######本来指定したい状態

レッスン	新規登録	ログイン
リンク	リンク	リンク

試したこと

ヘッダーのコードを一から入力し直しましたが、問題点が洗い出せず解決できませんでした。

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

使用機器：Dynabook 15インチ
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>Prog8</title> 
7    <link rel="stylesheet" href="stylesheet.css">
8    <link rel="stylesheet" href="responsive.css">
9    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
10    <script src="https://kit.fontawesome.com/e95c4cdf47.js" crossorigin="anonymous"></script>
11  </head>
12
13  <body>
14    <header>
15      <div class="container">
16        <div class="header-left">
17          <img class="logo" src="img/main_logo.png">
18        </div>
19        <span class="menu-icon"><i class="fa fa-bars"></i></span>
20        <div class="header-right">
21          <a href="#">レッスン</a>
22          <a href="#">新規登録</a>
23          <a href="#" class="login">ログイン</a>
24        </div>
25      </div>
26    </header>
27
28    <div class="top-wrapper">
29      <div class="container">
30        <h1>
31          LEARN TO CODE.
32          <br>
33          LEARN TO BE CREATIVE.
34        </h1>
35        <p>Progateはオンラインプログラミング学習サービスです。
36          <br>
37          初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
38        <div class="btn-wrapper">
39          <a href="#" class="btn signup">
40            新規登録はこちら</a>
41          <p>or</p>
42          <a href="#" class="btn facebook">
43            <span class="fa fa-facebook"></span>
44            Facebookで登録
45          </a>
46          <a href="#" class="btn twitter">
47            <span class="fa fa-twitter">
48            Twitterで登録
49          </a>
50        </div>  
51      </div>
52    </div>
53
54    <div class="lesson-wrapper">
55      <div class="container">
56        <div class="heading">
57          <h2>Learn Where to Get Started!</h2>
58        </div>
59        <div class="lessons">
60          <div class="lesson">
61            <div class="lesson-icon">
62              <img src="img/html.png">
63              <p>HTML&CSS</p>
64            </div>
65            <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
66          </div>
67          <div class="lesson">
68            <div class="lesson-icon">
69              <img src="img/jQuery.png">
70              <p>jQuery</p>
71            </div>
72            <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
73          </div>
74          <div class="lesson">
75            <div class="lesson-icon">
76              <img src="img/ruby.png">
77              <p>Ruby</p>
78            </div>
79            <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
80          </div>
81          <div class="lesson">
82            <div class="lesson-icon">
83              <img src="img/php.png">
84              <p>PHP</p>
85            </div>
86            <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
87          </div>
88          <div class="clear"></div>
89        </div>
90      </div>
91    </div>
92
93    <div class="message-wrapper">
94      <div class="container">
95        <div class="heading">
96          <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
97          <h3>Let's learn to code, learn to be creative!</h3>
98        </div>
99        <span class="btn message">さっそく開発する</span>
100      </div>
101    </div>
102
103    <footer>
104      <div class="container">
105        <img src="img/footer_logo.png">
106        <p>Learn to Code, Learn to be Creative.</p>
107      </div>
108    </footer>
109
110  </body>
111
112</html>

stylesheet
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  font-family: "Hiragino Kaku Gothic ProN";
8}
9
10a {
11  text-decoration: none;
12}
13
14.clear {
15  clear: left;
16}
17
18.container {
19  max-width: 1170px
20  width: 100%;
21  margin: 0 auto;
22  padding: 0 15px;
23}
24
25header {
26  height: 65px;
27  width: 100%;
28  background-color: rgba(34,49,52,0.9);
29  position: fixed;
30  top: 0;
31  z-index: 10;
32}
33
34.logo {
35  width: 124px;
36  margin-top: 20px;
37}
38
39.header-left {
40  float: left;
41}
42
43.header-right {
44  float: right;
45  margin-left: 10px;
46}
47
48.header-right a {
49  line-height: 65px;
50  padding: 0 25px;
51  color: white;
52  display: block;
53  float: left;
54  transition: all 0.5s;
55}
56
57.header-right:hover {
58  background-color: rgba(255, 255, 255, 0.5);
59}
60
61.menu-icon {
62  color: white;
63  float: right;
64  font-size: 25px;
65  padding: 20px 0;
66  display: none;
67}
68
69.top-wrapper {
70  padding: 180px 0 100px 0;
71  background-image: url(img/top.png);
72  color: white;
73  background-size: cover;
74  text-align: center;
75}
76
77.top-wrapper h1 {
78  opacity: 0.7;
79  font-size: 45px;
80  letter-spacing: 5px;
81}
82
83.top-wrapper p {
84  opacity: 0.7;
85  font-size: 16px;
86  margin-bottom: 40px;
87}
88
89.btn {
90  padding: 8px 24px;
91  color: white;
92  display: inline-block;
93  opacity: 0.8;
94  border-radius: 4px;
95  text-align: center;
96}
97
98.signup {
99  background-color: #239b76;
100}
101
102.btn-wrapper p {
103  margin-bottom: 20px;
104}
105
106.facebook {
107  background-color: #3b5998;
108  margin-right: 10px;
109}
110
111.twitter {
112  background-color: #55acee;
113}
114
115.lesson-wrapper {
116  padding-bottom: 80px;
117  padding-left: 5%;
118  padding-right: 5%;
119  background-color: #f7f7f7;
120  text-align: center;
121}
122
123.heading {
124  padding-top: 80px;
125    padding-bottom: 50px;
126    color: #5f5d60;
127}
128
129.heading h2 {
130  font-weight: normal;
131}
132
133.lesson {
134  float: left;
135  width: 25%;
136}
137
138.lesson-icon {
139  position: relative;
140}
141
142.lesson-icon p {
143  position: absolute;
144  top: 37%;
145  width: 100%;
146  color: white;
147}
148
149.text-contents {
150  width: 80%;
151  display: inline-block;
152  margin-top: 15px;
153  font-size: 13px;
154  color: #b3aeb5;
155}
156
157.message-wrapper {
158  border-bottom: 1px solid #eee;
159  padding-bottom: 80px;
160  text-align: center;
161}
162
163.heading {
164  padding-top: 80px;
165  padding-bottom: 50px;
166  color: #5f5d60;
167}
168
169.heading h2 {
170  font-weight: normal;
171}
172
173.heading h3 {
174  font-weight: normal;
175}
176
177.message {
178  padding: 15px 40px;
179  background-color: #5dca88;
180  cursor: pointer;
181  box-shadow: 0px 7px #1a7940;
182}
183
184.message:hover {
185  filter: brightness(1.10);
186}
187
188.message:active {
189  box-shadow: none;
190  position: relative;
191  top: 7px;
192}
193
194footer {
195  padding-top: 30px;
196  padding-bottom: 20px;
197  margin-left: 15px;
198}
199
200footer img {
201  width: 125px;
202}
203
204footer p {
205  color: #b3aeb5;
206  font-size: 12px;
207}

responsive
1/* タブレット */
2@media (max-width: 1000px) {
3  
4  .lesson {
5    width: 50%;
6    margin-bottom: 50px;
7  }
8
9  .top-wrapper h1 {
10    font-size: 32px;
11  }
12  .heading h2 {
13    font-size: 20px;
14  }
15
16}
17
18/* スマホ */
19@media (max-width: 670px) {
20  .header-right {
21    display: none;
22  }
23
24  .menu-icon {
25    display: block;
26    margin-bottom: ;
27  }
28
29  .twitter {
30    margin-top: 10px;
31}
32
33  .lesson-wrapper {
34    height: 1700px;
35  }
36  .lesson {
37    width: 100%;
38  } 
39  footer {
40    text-align: center;
41  } 
42  .btn {
43    width: 100%;
44  }
45
46  .top-wrapper h1 {
47    font-size: 24px;
48  }
49
50  .top-wrapper p {
51    font-size: 14px;
52  }
53}

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

回答1件

ベストアンサー

CSS
1.header-right:hover
2↓↓↓
3.header-right a:hover

投稿2020/11/30 07:47

yambejp

総合スコア115010

yambejp

2020/11/30 07:47

もしくはこれだけでもよいかもしれません .header-right :hover

_505turkish

2020/11/30 08:02

.header-right:hover ↓↓↓ .header-right a:hover .header-right :hover ありがとうございます。上記2つの方法で解決しました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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