마우스 오버시 배경이미지 변경 스크립트

마우스 오버시 배경이미지 변경 스크립트

QA

마우스 오버시 배경이미지 변경 스크립트

본문

<div class="aaa">

    <div class="bbb">마우스 오버</div>
</div>

 

<script>
$('.bbb).hover(function() { $('.aaa').css("background-image", "url(마우스 오버시 이미지 경로)"); },
     function() { $('.aaa').css("background-image", "url(마우스 아웃시 이미지 경로)"); });
</script>

 

 

위 처럼 소스를 구성했습니다.

bbb영역에 마우스 오버하면 aaa영역의 백그라운드 이미지가 변경되게, 작동은 잘됩니다.

 

여기서 마우스오버 및 아웃 했을때 페이드인 효과처럼 서서히 변경하게 하고 싶은데

어디에 어떤 소스를 추가해야 하는지 아시는분 답변 부탁드립니다~!

이 질문에 댓글 쓰기 :

답변 2

페이드효과가 들어가려면 css의 transition 속성을 사용하셔야 합니다.

 

하지만 background-image 자체에는 transition 속성이 적용되지 않습니다.

 

aaa 와 bbb의  background-image를 따로 지정한다음에

다음과 같이 스타일을 주고

.aaa {transition : 0.3s ease; opacity : 1;} /* opacity 는 투명도입니다. */

.bbb {transition : 0.3s ease; opacity : 0;}

 

호버시 aaa에게 opacity 를 0,

b에게 opacity 를 1

 

이렇게 주시면 원하시는 효과를 보실 수 있을거에용

 

답변을 작성하시기 전에 로그인 해주세요.
전체 40
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT