답변 3개 / 댓글 4개
채택된 답변
+20 포인트
css 만으로 동작하는 예제 입니다.
Copy
<style>
.section2 .flip-wrap {
display: flex;
height: 275px;
}
/*
.section2 .flip-wrap .list.active {
width: 65%;
}
.section2 .flip-wrap .list.non-active {
width: 35%;
}
*/
.section2 .flip-wrap .list {
position: relative;
width: 50%;
/* background: url(../image/bg-business-duty-free.jpg) no-repeat center center; */
background-size: cover;
transition: all .8s cubic-bezier(.215, .610, .355, 1);
}
.section2 .flip-wrap .list:nth-child(1) {
background-color: #ddd;
}
.section2 .flip-wrap .list:nth-child(2) {
background-color: #eee;
}
.section2 .flip-wrap .list:hover {
width: 100%;
}
</style>
<section class="section2">
<div class="flip-wrap">
<div class="list">1</div>
<div class="list">2</div>
</div>
</section>답변에 대한 댓글 3개
display: flex 속성이 지정된 상태에서 나머지 엘리먼트는 지정을 하지 않아 그렇습니다.
.section2 .flip-wrap .list:hover {
width: 100%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 0%;
}
혹은
.section2 .flip-wrap .list:hover {
width: 65%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 35%;
}
으로 가능합니다.
.section2 .flip-wrap .list:hover {
width: 100%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 0%;
}
혹은
.section2 .flip-wrap .list:hover {
width: 65%;
}
.section2 .flip-wrap:hover .list:not(:hover) {
width: 35%;
}
으로 가능합니다.
답변을 작성하려면 로그인이 필요합니다.
왜 그런지 궁금합니다.
https://codepen.io/sinbi/pen/eYrNWXM