hover시 *선택자 활용

 

 

1.HTML

<div id="container">
  <h2>프로덕트 매니지먼트</h2>
  <p>사용자 친화적 서비스 개발<br>
    PM 실무 역량 강화</p>
  <a>더 알아보기<span>></span></a>
</div>

 

2.CSS

*{
  margin: 0;
  padding: 0;
}
#container{
  padding: 20px;
  width: 300px;
  height: 200px;
  background-color: lightgray;
  position: relative;
  top: 10vh;
  transition: all .2s ease-out;
  border-radius: 16px;
  box-sizing: border-box;
}
#container > p{
  margin-block: 16px;
}
#container > a > span{
  background-color: white;
  border-radius: 100%;
}
#container:hover{
  background: #0190e3;
  top: 8vh;
}
#container:hover > *{
  color: #fff;
}
#container:hover span{
  color: #0190e3;
}

---

See the Pen [css]hover시 *선택자 활용 by TytanLee (@TytanLee) on CodePen.

hover 활용 시 *선택자로 코드 최소화하기