자바스크립트, 제이쿼리 없이 css만으로 hover 효과 만들기


자바스크립트, 제이쿼리 없이 css만으로 hover 효과 만들기

자바스크립트, 제이쿼리 없이 CSS만으로도 마우스오버했을때 슬라이드 되는 효과를 만들 수 있다. 제이쿼리를 이용해 이런식으로 쉽게 할 수도 있지만, 옆으로 슬라이드되게 하고 싶을때나 제이쿼리가 뭔소린지 1도 모르겠으면 어쩔건데? 그럴땐 css의 transition을 이용하면 된다. https://codepen.io/helloworld216/pen/vYeYRJd 샘플 코드펜을 만들었다. 마우스오버하면 margin-left가 줄어드는 transition을 이용해 텍스트가 슬라이드 되는 효과가 나타난다. 이런 아이콘이 있을 때, css의 transition을 이용해 마우스오버하면 안내문구가 슬라이딩되는 효과를 낼 수 있다. 또, 검색을 조금만 하면 js를 이용하지 않아도 다양한 모습으로 tran..........

자바스크립트, 제이쿼리 없이 css만으로 hover 효과 만들기에 대한 요약내용입니다.

자세한 내용은 아래에 원문링크를 확인해주시기 바랍니다.



원문링크 : 자바스크립트, 제이쿼리 없이 css만으로 hover 효과 만들기