상품리스트 테두리[롤오버]
본문
skin/shop/basic/sryle.scc 파일에서
106라인을 이렇게 수정하여 .sct img {margin:6px 0;border:1px solid #eee}
상품리스트에 나오는 이미지를 테두리가 생기게 하였습니다.
조금 욕심이 생겨서 마우스를 가져다 댈때 테루리 색이 다른색으로 변하는 롤오버?를 해보고 싶습니다.
어디를 어떻게 수정하여야 하나요?
어깨넘어로 배우는 중이라 늘 이렇게 질문을 합니다^^ 도와 주세요^^
답변 3
해당라인 바로 아래에 추가해보세요. (색상코드는 그냥 빨간색으로 했으니 수정하시면 됩니다.)
.sct img:hover {border:1px solid #f00}
다만 그 이미지에 a태그로 링크를 걸어주실거라면 포커스가 갔을때도 지정해주시는게 좋습니다.
.sct a:hover img, .sct a:focus img {border:1px solid #f00}
지운아빠님 스킨을 참고하세요.
<script type="text/javascript">
$(function(){
$("div.sct img").mouseover(function(){
$(this).css({
"border-color": "#eee", "border-width":"1px",
"border-style":"solid"
}).mouseout(function(){
$(this).css("border-width",0);
});
});
});
</script>
답변을 작성하시기 전에 로그인 해주세요.