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

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

QA

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

답변 2

본문

<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

 

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

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 40
© SIRSOFT
현재 페이지 제일 처음으로