자식을 hover 시 부모요소를 변경

Question

.flip { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 300px; height: 500px; } .flip div { border: 1px solid black; } .box1 { background-color: orangered; border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .box2 { background-color: orangered; } .box3 { background-color: orangered; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } .box1:hover .flip { transform: rotateY(45deg); }지금 상태는 이렇습니다. 왼쪽부터 box1,2,3이고제가 목표하는 건 box1 hover 시 전체(즉 flip)이 왼쪽으로 45도box2 hover 시 .flip에 그림자가 생기고box3 hover 시 .flip이 오른쪽으로 45도 회전하는 것을 구현하고 싶습니다.css 호버 후 변경요소를 선택할 때~ > + 이런것들을 사용하는 걸로 알고 있는데 부모를 선택하는 방법은 따로 없더라구요. .box1:hover .flip { transform:rotateY(45deg);} 그냥 이렇게 적어도 꿈쩍을 안합니다.자식을 호버 시 부모를 변경하는 방법이 있을까요?

frostyDog · Answer

https://caniuse.com/?search&#61;%3Ahas()최근부터 지원하기 시작한 :has가 있긴합니다

코딩찡찡이 · Answer

퇴근 전이라 post만 찾아서 드릴게요 https://www.w3docs.com/snippets/css/how-to-style-the-parent-element-when-hovering-a-child-element.html keyword: change parent style when hover child

자식을 hover 시 부모요소를 변경

2개의 답변

Q&A 목록