카페24 롤오버 기능

최근에 관리하기시작한 쇼핑몰 디자인을 새로 바꾸면서 현재 디자인과 어울리지 않는 부분들을 제거하고자 소스를 뒤져보고 있던 중이었습니다. 상품이미지를 선택했을때 롤오버 되는 부분을 수정하려고하는데, 좀처럼 CSS나 JS에서 해당 기능이 적용된 부분을 찾을 수가 없었습니다.

혹시나 싶어서 디자인 수정, 상품관리에서도 관련 메뉴가 있나 살펴보았는데 없더군요. 엉뚱하게도 전혀 연관성없는 메뉴에서 설정해줄 수 있다는걸 발견했습니다.

위와 같이 상점관리 – 화면효과 설정 – 상품이미지 효과 설정을 통해 해당 설정을 켜고 끌 수 있습니다. CSS나 JS를 사용할줄 모르는 사용자를 위해서 제공하는 기능같습니다만, 최소한 해당 메뉴는 디자인관리에서 적용될 수 있도록 되어야 맞지 않나 싶네요. 정말 한참을 헤매고 뒤진 끝에 발견할 수 있었던터라 연관성이 몹시 떨어지는 곳에 메뉴가 위치하고 있어서 아쉬움이 많이 느껴집니다.

더불어서 간단하게 CSS를 이용해서 비슷한 효과를 낼 수 있는 방법이 있습니다. 아래 소스를 첨부했습니다.

CSS 부분을 보시면 위와같이 바로 :hover라는 가상클래스를 이용하는 것인데요. css에서 보통 상태와, 마우스를 올렸을때(hover) 어떻게 변화할 것인지만 새로 기술해주는 것만으로 충분히 사용이 가능합니다.

jquery 이용해서 만드는 hover 효과

Jquery 를 이용해서 위의 Auction에서 쓰인 효과를 구현해보았습니다. 메뉴에 마우스를 올리면, 서브로 숨겨져있던 내용이 메뉴와 이어져서 나타나는 방식입니다. 단순히 css만으로 구현하기에는 한계가 있기 때문에 jquery로 해결해주었습니다.

소스를 만들어놓고 따로 정리해놓지 않으면 재차 까먹고 다시 만드는 일이 잦아서 관리차원에서 기록으로 남겨놓습니다.

아래 내용이 해당 소스입니다. 반응형을 고려하지 않고 고정된 레이아웃의 pc상에서의 작동하는 것만 생각하고 만든 소스입니다. 깔끔하지 못한 소스입니다만, 필요하신 분은 수정해서 쓰셔도 좋습니다.