해당 width에서 -100을 할 수 있나요? 채택완료

굼떠 3년 전 조회 1,882

3개의 DIV가 있는데 가로사이즈는 다 다릅니다.

클릭하면 클릭된 영역이 커지고, 마우스 오버시 오버된 DIV는 가로가 100px이 커지고 제외한 DIV는 50px 씩 줄어들게 하고싶은데 가능한가요?

단순한게 아닌거 같아서 CSS로 해봤다가 절대 불가능한거같아서 시블링스 쓸라고 JQUERY로 해볼라고 했는데.. 가로값을 구한다쳐도 구해진 값을 CSS로 밀어넣는게 안되네요 ㅠㅠㅠ

</p>

<p>// jquery

    $(".sec03 li").click(function(){

        $(this).addClass("on");

        $(this).siblings().removeClass("on");

        $(this).siblings().css("width","calc(10% - 10px)");

    });</p>

<p>//css

.sec03 {height:calc(100vh - 200px);max-width: 1720px;margin: 0 auto;}

.sec03 li {height:calc(100vh - 200px);float:left;margin-right:15px;box-sizing:border-box;transition:all 0.25s ease;width:calc(10% - 10px);}

.sec03 ul {margin-top:10px;}

.sec03 li.on {width:calc(80% - 10px) !important;}

.sec03 li:first-child {width:calc(80% - 10px);}

.sec03 li:nth-child(3) {margin-right:0;}

#javascript