영카트5 상품리스트 페이지에서 제품이미지 오버롤 효과를 주고 싶습니다. 채택완료
영카트5 상품리스트 페이지에서 제품이미지 오버롤 효과를 주고 싶습니다.
예시사이트 주소를 올립니다.
http://jellymallow.com/product/list.html?cate_no=83">http://jellymallow.com/product/list.html?cate_no=83
원하는 내용이
제품리스트에서 상품이미지에 마우스를 오버롤 하면, 다른 이미지가 보이는 형식인데요.
제가 알기로 영카트 기본에서는 리스트에서는 이미지1 을 리스트썸네일로 불러오는 것으로 알고 있는데요.
여기에 추가로 오버롤시 이미지2를 보여준다거나 하는 식으로 구현하고 싶습니다.
도움 및 조언 부탁 드립니다.
감사합니다.
답변 2개
댓글을 작성하려면 로그인이 필요합니다.
이미지 하단에 <div class="Sct_img_layer2"><img src="롤오버이미지"></div>
그리고 style에 .sct_img_layer{display:none;position:absolute;top:0} 으로 주신 후
롤오버 스크립트 삽입하시면 될듯합니다
$(".sct_20 .sct_a").hover(function(){
$(this).children(".sct_img_layer2").stop().fadeIn();
},
function() {
$(".sct_20 .sct_a").stop();
$(this).children(".sct_img_layer2").stop().fadeOut();
});</span><span class="webkit-html-text-node webkit-html-js-node being-edited editing" contenteditable="plaintext-only" tabindex="0" style="min-width: 0px; min-height: 0px; box-sizing: border-box; outline: none; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 2px 4px, rgba(0, 0, 0, 0.1) 0px 2px 6px; background-color: white; padding-left: 2px; margin-left: -2px; padding-right: 2px; margin-right: -2px; margin-bottom: -1px; padding-bottom: 1px; color: rgb(34, 34, 34); white-space: pre-wrap; unicode-bidi: -webkit-isolate; font-family: Consolas, "Lucida Console", "Courier New", monospace; font-size: 12px; text-overflow: clip !important; opacity: 1 !important;">
</span></p><div>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인