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

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

ただいまの
回答率

87.59%

疑似要素(hover)が効かない

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,263

score 17

問題点・エラー

Airbnbの模写コーディングをしています。
body > div.main-col.col-12 > div > div:nth-child(1) > a の疑似要素(hover)が効きません。試しにほかのセレクタで試してみたところ、効いていたのでこのセレクタで効かないのがわからず、詰まってしまいました。
お時間許される方どなたかご教示願います。
赤枠部でhoverを有効にしたいです。二枚目は完成形です。

※文字数の関係で、リセットcssを記述できていません。申し分けないです。使用してもののリンクは以下です。
ドクターリセットcss
自分の画面

!完成形明](940baa5301840ebd9ed7257cbd09b480.png)

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">

      <!-- Bootstrap CSS -->

      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="responsive.css">


    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">

    <title>airbnb</title>
  </head>



<body class="container-fluid" >
      <div class="body-box">



              <div class="main-col col-12">
                <h2>ホスティングの詳細はこちら</h2>
                <div class="main-row row">


                <div class="detail reset-detail col-xl-3 ">
                  <img src="image/student-849825__340.webp">
                  <section>
                    <h3>初期設定</h3>
                    <p>ホスティング入門ガイド</p>
                    <p ><a href="#" class="hid">もっと詳しく</a></p>
                  </section>
                  <a href="#" class="all"></a>


                </div>

                <div class="detail reset-detail col-xl-3 ">
                  <img src="image/team-spirit-2447163__340.webp">
                  <section>
                    <h3>安全</h3>
                  <p>ホストを守るAirbnbのしくみ</p>
                  <p ><a href="#" class="hid">もっと詳しく</a></p>
                  </section>
                  <a href="#" class="all"></a>


                </div>

                <div class="detail reset-detail col-xl-3 ">
                  <img src="image/shoes-1246691__340.webp">
                  <section>
                    <h3>マネープラン</h3>
                    <p>Airbnbで収益を得るには</p>
                    <p ><a href="#" class="hid">もっと詳しく</a></p>
                  </section>
                  <a href="#" class="all"></a>


                </div>

                </div>
              </div>
            </div>
      </div>


    </div>

                    <div class="monetization col-12">
                      <img class="m-img" src="image/lefkada-3678517__340.jpg">


                        <section>
                          <h1>収益化してみますか?</h1>
                          <button type="button" class="btn btn-light">はじめる</button>
                        </section>
                      </div>


                </main>
                <hr style="margin-bottom: 0%;">

      </div>

   </body>
</html>
hr{
  margin: 1.5em 0;
}
.list-none-2 li:nth-child(1){
  margin-top: 60px;
}
.detail {
  border: 1px solid rgba(0,0,0,0.1);
    border-radius: 3px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.06)
}
.detail h3{
  font-weight: 800;
  font-size: 14px;
  line-height: 18px;
  color: #484848;
}
.detail p{
  font-weight: 300;
  font-size: 14px;line-height: 22px;
  color: #484848;
}
.detail section{
  width: 180px;
  padding-left: 20px;
 display:flex;
 flex-flow: wrap ;
 align-content: center;
}
section h3,p{
  display: inline-block;
  padding: 0px !important;
}
.main-row{
  padding-bottom: 80px;
}
.main a{
  color: #008489;
  text-decoration: none;
}
.main a:hover{
  text-decoration: underline;
}
@media(min-width:743px){
  .top-img-box{
    width: 100%;
    height: 680px;
    display: inline-block;
    vertical-align: bottom;

  }
  .top-img{
    object-fit: cover;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .header a{
    writing-mode: unset;

  }
  .header{
    padding-bottom:20px ;
    display: flex;
    align-items: center;
  }


  .top{
    border-radius: 10px;
    padding: 50px 20px 20px 20px;
    background-color: white;
    transform: translateY(-30%) ;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1) ;
    height: 480px;
    display: flex;
    flex-flow: row nowrap;
  }
  .t-1{
    padding: 0 10px !important;
    margin-right: 30px !important;
    width: 50%;
    height: 100%;
    border-bottom:0 !important;
    border-right:1px gainsboro solid ;
  }
  .t-2{
    width: 50%;
    height: 100%;
    overflow-y: scroll;
  }
  .t-2 h2{
    margin-top:0px !important;
  }
  .main-row{
    display: flex;
    justify-content: space-between;
  }
  .host-1,.host-2 {
    display: flex;
    justify-content: center;
    height: 320px;
  }
  .steps-img{
    order: 0;
    padding-top:0 !important;
    height: 320px !important;
    width: 320px !important;
    display: inline-block !important;
    margin-right: 35px;
  }
  .financial-img{
    order: -1;
    padding-top:0% !important;
    height: 320px !important;
    width: 320px !important;
    display: inline-block !important;
    margin-right: 35px;

  }
  .host-voice{
    order: -1;
    height: 320px !important;
    width: 320px !important;
    display: inline-block !important;
    padding-left: 35px;
  }
  .monetization{
    width: 1280px !important;
    margin: 0 auto !important;
    height: 440px !important;
    position: relative;
  }
  .monetization section{
    position: absolute;
    top: -340px !important;
  left: 10% !important;
  }


}


@media (min-width: 1200px){
  .top-img-box{
    width: 100%;
    height: 680px;
    display: inline-block;
    vertical-align: bottom;

  }
  .top-img{
    object-fit: cover;
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
  .top-img-box {
    position: relative;
    margin-bottom: 140px;
  }
  .top{
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1) ;
position: absolute;
top: 500px;
right: 15%;
    height: 480px;
    width: 980px;
    display: flex;
    flex-flow: row nowrap;
  }
  .t-1{
    padding: 0 10px !important;
    margin-right: 30px !important;
    width: 50%;
    height: 100%;
    border-bottom:0 !important;
    border-right:1px gainsboro solid ;
  }
  .t-2{
    width: 50% !important ;
    height: 100% !important;

  }
  .host-1,.secure,.host-2 {
    display: flex;
    justify-content: center;
    height: 518px;
  }
  .steps-img{
    order: 0;
    padding-top:0 !important;
    height: 518px !important;
    width: 518px !important;
  }
  .financial-img{
    order: -1;
    padding-top:100%;
    height: 518px !important;
    width: 518px !important;
  }
  .host-voice{
    order: -1;
    height: 417px !important;
    width: 422px !important;
    display: inline-block !important;
    padding-left: 35px;
  }
  .main-col h1{
    text-align: center;
    }
    .main-row{
      display: flex;
    justify-content: center;
    }
    .main-row .detail {
      border: none;
    box-shadow: none;
    display: initial;
    height: 260px;
    }
    .main-row .detail .all:hover{
      color:  #008489 !important;
      transition-duration:1.0s !important;

    }
    .main-row .detail img{
      display: inline-block;
      width: 100%;
      height: 70%;
    }
    .main-row .detail section{
      display: inline-block;
      height: 30%;
      width: 100%;
      padding: 0%;
    }
   .detail section h3,p{
     display: block;
    }

    .detail .hid{
      width: initial !important;
      height: initial !important;
      overflow: initial !important;
      opacity: initial !important;
      display: block;
    }
    .detail p{
      display: block;
    }

    .monetization{
      width: 1280px !important;
      margin: 0 auto !important;
      height: 440px !important;
      position: relative;
    }
    .monetization section{
      position: absolute;
      top: -340px !important;
    left: 10% !important;
    }
    .footer hr{
      display: none;
    }
    .footer{
      display: flex !important;
      justify-content: space-between !important;
      width: 1280px;
      margin: 0 auto !important;
      padding-right: 0 !important;
      padding-left: 0 !important;
    }
    .f-col{
      display: inline-block !important;
    }
    .cover{
      width: 1280px !important;
      margin: 0 auto;

    }
    .main-row{
      width: 1033px;
      margin: 0 auto !important;
      display: flex;
      justify-content: space-between;
    }
    .main-col{
      width: 1033px;
      margin: 0 auto !important;
    }

}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

セレクタの指定が間違っていないでしょうか…?
div:nth-child(1)でなくdiv:nth-of-type(1)にしてみるとどうでしょうか。

もしくは、セレクタの入れ子をせず、
.detail.reset-detail.col-xl-3にホバーを設定してみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/11/02 15:30

    質問者さんが一番詰まっている部分が、セレクタの指定のように見受けられましたので…
    赤枠全体をリンクにする場合は、
    imgタグとsectionタグを囲うような形でaタグを設定してあげると良いです。
    いま「もっと詳しく」にしかリンクが設定されていないようなので!

    キャンセル

  • 2020/11/02 16:26 編集

    下のようにcssを記述すると解決しました!
    .detail a:nth-last-of-type(1):hover{
    box-shadow: 0 0 5px #008489;
    transition-duration: 0.8s;

    }
    私がbox-shadowではなく、何もテキストのないaタグに色指定(color)のhoverをしていたのも大きな問題だったと思います。
    .detail a:nth-of-type(1):hoverや.detail .all:hoverのセレクタでも効きました!

    キャンセル

  • 2020/11/02 16:34

    ホバーでふわっと影をつけたかったのですね。
    原因もわかったようで良かったです!色々試してみてください。

    キャンセル

0

HTML構造がおかしいです。
使用していないmainの閉じタグがあります。
divの開始タグが7件に対して閉じタグが10件あります。

*修正しようと思いましたが閉じDIVが多すぎて本来どのような構造にしたかったかちょっと把握できませんでした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/11/02 14:45

    返信ありがとうございます!
    文字数の関係上、HTML、css、responsible cssともに書き切れず、中途半端に不足部分があり、申し訳ありません。。
    この投稿に続きとして、新たな投稿にコーディングをすべて載せるので、今しばらくお待ちください!

    キャンセル

  • 2020/11/02 16:15

    載せてみましたが、teratailの方針上良くないことがわかりましたので、削除リクエストを出させていただきます、申し分けないです。
    回答ありがとうございます!

    キャンセル

0

HTMLのタグの開始タグと閉じタグの対応かおかしいというのは既に他の回答者さんから指摘があります。
まずは、それを修正してください。

次に提示のCSSで:hoverがあるのは2箇所ですが、
まずは、一つ目

.main a:hover{
  text-decoration: underline;
}


.mainというセレクタを使ってますが、提示のHTMLには、main というクラスがないので効くはずもない。

2つ目は、下記ですが、

@media (min-width: 1200px){

/* 中略 */

    .main-row .detail .all:hover{
      color:  #008489 !important;
      transition-duration:1.0s !important;

    }

これは、HTMLだと、下記の部分に対応するセレクタですが、
(検証ツールのCopy Selectorでは、body > div.body-box > div > div > div:nth-child(1) > a となる。)

          <section>
            <h3>安全</h3>
            <p>ホストを守るAirbnbのしくみ</p>
            <p><a href="#" class="hid">もっと詳しく</a></p>
          </section>
          <a href="#" class="all"></a> <!-- ここ -->

aタグの中身がないので、サイズが 0x0 になりますのでホバーはできません。
中身を例えば下記のように入れたら、ホバーすると色がちゃんと変化します。
ただし、画面幅が1200px以上の時だけですが。

          <a href="#" class="all">リンクです</a> 

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る