React|このチュートリアルを使用して第3部を復習

今回は写真にマウスをかざすとMYMENUが出てきます

cssでは簡単に実現できますが、ネストができているので混乱しています.サスペンションが必要なのはZookImg綿.zookImg以外:サスペンションですか...暴風捜索の後やっと方法を見つけましたハハ、マウスを画像の上に置いて、画像のサブ要素myMenuを見ることができて、これでいいです~大したことはありませんか?という考えが生まれた.ホーバーを検索している間にホーバー効果をたくさん見たので、後で整理しておくと役に立つはずです.

.zookImg{ //중요한 코드 빼곤 다 지움 주의
	.myMenu { 
      	visibility: hidden;
    	}

    	&:hover {
      		.myMenu {
        	visibility: visible;
      		}
    	}
  } 

そしてこれを実現するにあたり、divボックスにMYMENUという文字を横並びにしたいのですが、text-align: centerと書くと横並びしかできず、縦に並べられない…縦に描く方法を見つけましたが、結局paddingを描きました

navbarサスペンションを実現するのは簡単です.比較的速い!
今divボックスにテキストを入れるときに調整が少し混同しています...もっとやればよくなると信じています.
今回はこの方式で実現しました.

.introPhoto {
  position: relative;
  background-image: url("https://cdn.bonif.co.kr/cmdt/BF102_pic_RdqEpkMX.jpg");
  background-position: center;
  background-size: cover;
  width: 1000px;
  height: 400px;

  .introPhotoText {
    position: absolute;
    bottom: 70px;
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: white;
  }
}

やりたいことはてきぱきと真ん中に立って、やらないと動かない.これが一番いいと思いますが、グーグルのほうがきっともっといい方法があると知っているので、もう一度検索しなければなりません.今日はここまで明日はMainnNavBarから