해당 width에서 -100을 할 수 있나요?
본문
3개의 DIV가 있는데 가로사이즈는 다 다릅니다.
클릭하면 클릭된 영역이 커지고, 마우스 오버시 오버된 DIV는 가로가 100px이 커지고 제외한 DIV는 50px 씩 줄어들게 하고싶은데 가능한가요?
단순한게 아닌거 같아서 CSS로 해봤다가 절대 불가능한거같아서 시블링스 쓸라고 JQUERY로 해볼라고 했는데.. 가로값을 구한다쳐도 구해진 값을 CSS로 밀어넣는게 안되네요 ㅠㅠㅠ
// jquery
$(".sec03 li").click(function(){
$(this).addClass("on");
$(this).siblings().removeClass("on");
$(this).siblings().css("width","calc(10% - 10px)");
});
//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;}
답변 1
https://jsfiddle.net/9510a6kj/
https://stackoverflow.com/questions/43832991/change-width-of-divs-next-to-each-other-on-hover
검색 키워드를 뭐로 잡아야할지 몰라 한참을 삽질했는데 너무 감사합니다!
답변을 작성하시기 전에 로그인 해주세요.
