251027 picogram (top-bar)

[상단바에 마우스를 올렸을 경우: 글씨가 변경되는 방법]

.top-bar:hover .menu ul>li {

  color: black;

}

 

[상단바에 마우스를 올렸을 경우: 퓨리얼브랜드몰 글씨와 아이콘 색상 바꾸는 방법] 

.top-bar:hover .user-btn {

  color: rgba(9, 113, 206, 1);

}

.top-bar:hover .user-btn::after {

  background-image: url(../image/before.png);

}

.top-bar:hover .user-btn::before {

  background-image: url(../image/after.png);

}

 

    <!-- 2차 메뉴 본체/ block -->

     <div class="menu2">2차 메뉴</div>

/* 2차 메뉴 */

.menu2 {

  background-color: #fff;

  position: absolute;

  left: 0; right: 0; top: 100%;

  height: 0; overflow: hidden;

  transition: 0.5s;

}

.top-bar:hover .menu2  {

  height: 358px;

  border-top: 1px solid rgba(229, 229, 229, 1);

}

.menu2-back {

  background-color: rgba(0, 0, 0, 0.5);

  position: absolute;

  left: 0; top: 0; right: 0;

  /* calc() -> 속성값 사칙연산가능(-,+,*,/)

  수치가 있는 모든 값에서 사용가능, 문자값은 사용 x */

  /* 화면 높이 값 - 상단바 값 = 검은색 뒷 배경 값 */

  height: 0; transition: 0.5s;

  overflow: hidden;

}

/* .top-bar:hover .menu2-back {

  height: calc(100vh - 100px);

} */

.top-bar:hover + .menu2-back {

  /* height: calc(100vh - 100px); */

  height: 100%;

}

 

[ul*6>li*4>a[href="#"]{list}]

        <ul>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

        </ul>

        <ul>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

        </ul>

        <ul>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

        </ul>

        <ul>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

        </ul>

        <ul>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

        </ul>

        <ul>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

          <li><a href="#">list</a></li>

        </ul>

  flex-grow: 1; flex-basis: 0;

 

/* flex-grow는 기본적으로 자식 크기에 따라 변형되게 만들어져있다.
자식 크기에 영향받지 않고 일정한 비율로 구현하고 싶을때 flex-basis: 0;이라는 코드를 함께 적용하여 사용한다.

flex-basis: 0; -> 자식 요소 크기를 0값으로 만들겠다. 정도로 이해하면 좋다.(진짜로 0으로 만드는 것이 아닌 없는 것 처럼 속이는 코드)
*/