hover時に横に広がってしまう

お世話になっております。
progateのtopページの模写コーディングをしていて
hover時にnavの背景の色を変えたいのですが上手くいきません。。。

背景の色を変えることは成功したのですがhover時に左にズレてしまいます。
paddingかmarginが関係しているのはわかるのですが、
どうすればhover時にその場に止まってくれるのかがわかりません。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <title>progate</title>
</head>
<body>
  <header>
    <div class="header-container">
      <img class="header-logo" src="img/primary_logo-4d1810538e410b4c6af84210420099ca1772e8cb39013fad8532e499bcdb136e.svg" alt="">
      <ul class="header-nav">
        <li><a href="#">法人プラン</a></li>
        <li><a href="#">言語<i class="fas solid fa-angle-down"></i></a></li>
        <li class="login"><a href="#">ログイン</a></li>
        <li class="member"><a href="#">無料会員登録</a></li>
      </ul>
    </div>
  </header>

  
</body>
</html>

![![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-15/69492e57-ff5c-4ec2-bd4a-ed269360fab4.png)](https://ddjkaamml8q8x.cloudfront.net/questions/2022-04-15/1c69633a-93c5-4414-8b71-850bb4f4ae77.png)

header .header-nav{
  display: flex;
  align-items: center;
}

.header-nav li{
  padding-right:45px;
}

.header-nav li:nth-of-type(3n){
  padding-right: 25px;
}

.header-nav .member a{
  display:block;
  padding: 15px 18px ;
  border-radius: 5px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  background-color: rgb(48, 200, 214);
  font-family: AvenirNext, Lato, "Hirago KakuGothic ProN", Meiryo, sans-serif;
  font-size: 0.75rem;
}

.header-nav a{
  font-size: 14px;
  color: #2b546a;
}

.fas{
  padding-left: 3px;
}

.header-nav a:hover{
  background: #f0f5fd;
  color: #2b546a;
  padding: 15px 18px ;
  margin: 0 8px;
  border-radius: 5px;
  transition: 0.5s;
}

拙い文章で申し訳ありませんが何卒よろしくお願いいたします。

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

回答2件

ベストアンサー

広がってしまう理由

hoverしていない時はpaddingがないのにhoverしたらpaddingをつけるようにしているのが問題
あとmarginもですね。
下記があるとhoverした瞬間に広がります

css
1.header-nav a:hover{
2.
3.
4  padding: 15px 18px ;
5  margin: 0 8px;
6}

解決方法は下記

.header-nav a:hoverからmarginとpaddingを削除
.header-nav aに削除したmarginとpaddingを追加

上記の変更を行うことで、hoverしてからpaddingを付与するのではなく、最初から付与した状態になる

このタイミングで横幅が狂う問題が発生する
.header-nav liのpadding-rightが原因でので好きに調整してください　取り合えず消しちゃいましょう

hoverした時に色を変えたい

実は現時点で一部できています。気づいていましたか？
少しだけ色ついてますよね (下記画像)
これを解決するためには.header-nav aに display: inline-block;をするとよいです。
要素には状態が3つあって inline inline-block blockがあります。inlineはmarginやpaddingが意図しない形でかかってしまうのであまりメリットないです。 aタグは基本
inline-blockにすることを薦めします

最終的な`css`

css
1header .header-nav{
2  display: flex;
3  align-items: center;
4}
5
6.header-nav li{
7  /* 削除しました */
8}
9
10.header-nav li:nth-of-type(3n){
11  padding-right: 25px;
12}
13
14.header-nav .member a{
15  display:block;
16  padding: 15px 18px ;
17  border-radius: 5px;
18  font-weight: bold;
19  color: rgb(255, 255, 255);
20  background-color: rgb(48, 200, 214);
21  font-family: AvenirNext, Lato, "Hirago KakuGothic ProN", Meiryo, sans-serif;
22  font-size: 0.75rem;
23}
24
25.header-nav a{
26  font-size: 14px;
27  color: #2b546a;
28  padding: 15px 18px;
29  /* 下記を追加 */
30  display: inline-block;
31}
32
33.fas{
34  padding-left: 3px;
35}
36
37.header-nav a:hover{
38  background: #f0f5fd;
39  color: #2b546a;
40  /* 削除した項目があります */
41  
42  
43  border-radius: 5px;
44  transition: 0.5s;
45}

投稿2022/04/16 11:43

smoon

総合スコア191

cae_03

2022/04/17 03:00

ご回答ありがとうございます！基本的なことをもっと勉強しなければいけませんね、、とても分かり易かったです。本当に勉強になりました！ありがとうございました！

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

hover時のスタイルにmarginとpaddingを当てていたので、「hover前」と「hover時」で２重でスタイルが付与されてるの原因だと思います。

.header-nav a:hover{
  background: #f0f5fd;
  color: #2b546a;
  padding: 15px 18px ;
  margin: 0 8px;
  border-radius: 5px;
  transition: 0.5s;
}

.header-nav a:hover{
  background: #f0f5fd;
  color: #2b546a;
  border-radius: 5px;
  transition: 0.5s;
}

投稿2022/04/14 15:48

kobu

総合スコア118

cae_03

2022/04/15 04:12

ご回答ありがとうございます！ではhover時の背景色はどのように設定したらいいのでしょうか、、

kobu

2022/04/15 04:19

下記の内容が、hover時に変更したい色になっています！ background: #f0f5fd; 私のローカル環境では変化すること確認できましたが、できなかったということでしょうか？

cae_03

2022/04/15 14:18

言葉足らずで申し訳ないです！仰る通り背景の色は問題なく変わるのですが、そのhover時の背景色の領域を広げるにはどうしたらいいでしょうか。。

cae_03

2022/04/15 23:00

https://prog-8.com/ このヘッダーのようにしたいです！

smoon

2022/04/16 11:46

.header-nav aに display: inline-block;を付与するだけです

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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