[uiux codepen]아코디언 박스(마우스 호버시 영역확장)

See the Pen [jQuery]아코디언 박스(마우스 호버시 영역확장) by kaia (@kaiaakim) on CodePen.

<div class="wrap">
  <ul class="accordion">
    <li class="on">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

*{padding: 0; margin: 0;}
li{list-style: none;}

.wrap{
  width: 100%; position: relative; overflow: hidden;
}
.accordion{
  width: 800px; margin: 50px;
  display: flex; justify-content: space-between;
  font-weight: bold; font-size: 28px;
}
.accordion li{
  height: 150px; border-radius: 20px;
  margin: 20px;
  flex-grow: 1; 
  /* flex-grow 영역안에서 비율나누기 */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: flex-grow 0.5s;
  background: Moccasin;
}
.accordion li.on{
  flex-grow: 3;
  /* on class붙으면 영역 3으로 늘어남 */
}

$(function(){
  $(".accordion li").on('mouseenter focus', function(){ //mounsenter - 마우스가 영역안에 들어갈때
    $(".accordion li").removeClass('on'); //항상 removeClass도 작성하기
    $(this).addClass('on');
  });
});