Progateのhtml/css道場 中級編の以下部分で詰まっています。
Progateで答えを確認し、自分のコードと比較してみたのですがわからなかったのでこちらで質問させて頂きました。
【実現したいこと】
opacity: 0.8;
で設定している3つのボタンの不透過度をマウスオーバー時に
opacity: 1;
にして完全に表示されるようにしたい。
【困っていること】
btn:hovor { opacity: 1;}
の設定が効かないが原因がわからない。
【html】
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> <!-- ここでFont Awesomeを読み込んでください --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <!-- ここにコードを書いていきましょう --> <div id="wrapper"> <div class="container"> <div class="main"> <h1 class="copy">LEARN TO CODE.</h1> <h1 class="copy">LEARN TO BE CREATIVE.</h1> <p clas="about">Progateはオンラインプログラミング学習サービスです。</p> <p clas="about">初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> </div> <div class="button"> <a href="#" class="btn sign-in">新規登録はこちら</a> <p class="or">or</p> <a href="#" class="btn facebook"><span class="fa fa-facebook-f"></span> Facebookで登録</a> <a href="#" class="btn twitter"><span class="fa fa-twitter"></span> Twitterで登録</a> </div><!--button--> </div><!--container--> </div><!--wrapper--> </body> </html>
【css】
/* CSSのリセット(消さないでください) */ html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } body { font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif; } li { list-style: none; } a { text-decoration: none; } /* ここからCSSを書いていきましょう */ #wrapper { width: 100%; height: 100%; background-image: url(https://prog-8.com/images/html/advanced/top.png); background-repeat: no-repeat; background-size: cover; } .container { margin: 0 auto; width: 1170px; padding: 180px 0 100px 0; text-align: center; } .main { padding: 0; margin-bottom: 30px; } .main > p { color: white; opacity: 0.7; } .main > .copy { font-size: 45px; font-weight: bold; letter-spacing: 5px; color: white; opacity: 0.7; } .button { text-align: center; } .button > .or { color: white; margin-top: 15px; margin-bottom: 15px; opacity: 0.7; } .button > .sign-in, .facebook, .twitter { display:inline-block; border-radius: 4px; color: white; opacity: 0.8; padding: 8px 24px; } .sign-in { background-color: #239b67; opacity: 0.8; } .facebook { background-color: #3b5998; margin-right: 10px; opacity: 0.8; } .twitter { background-color: #55acee; opacity: 0.8; } .btn:hovor { opacity: 1; } .button > .mark-f, .mark-t { color: white; }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/13 06:33
2020/01/13 06:45
2020/01/13 06:46
2020/01/13 07:02