MarkUp/CSS

[CSS] hover 의 반대 :not(:hover)

hhnn 2022. 2. 11. 12:23
.lineUp .sliderContainer > a {overflow: hidden; display: block; width: 250px; margin-right: 15px;}
.lineUp .sliderContainer > a img {width: 100%;}
.lineUp .sliderContainer > a img:hover {transition: .5s; transform: scale(1.03);}
.lineUp .sliderContainer > a img:not(:hover) {transition: .5s; transform: scale(1);}

보통 :hover를 통해 색깔변경을 많이 해주는데

 

transform으로 이미지 확대나 변형 한 뒤 다시 부드럽게 돌아가게 하기 위해 간단하게 :not(:hover)를 이용할 수 있다.

 


참고자료

hover의 반대되는 CSS가 있습니까?

 

반응형
SMALL