마우스 오버시 배경이미지 변경 스크립트
본문
<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
이렇게 주시면 원하시는 효과를 보실 수 있을거에용
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations
https://jess2.xyz/css/fade-in-out/
참고 해보시면 좋을거 같아요
