마우스 오버? 질문드립니다
본문
<img src="off.jpg" class="a">
<img src="on.png" class="b">
온오프 이미지를 구현하려고 합니다.
오프인 상태에서 마우스 포인트를 올려놓으면(마우스오버) on이미지가 뜨도록 하고싶은데 참고할만한 자료 있을까요?
답변 2
$(".a").mouseover(function(){
$(this).attr('src', 'on.jpg');
}).mouseout(function(){
$(this).attr('src', 'off.jpg');
})
<style>
.image-container {
position: relative;
display: inline-block;
}
.image-container img.b {
display: none;
position: absolute;
top: 0;
left: 0;
}
.image-container:hover img.a {
display: none;
}
.image-container:hover img.b {
display: block;
}
</style>
<div class="image-container">
<img src="off.jpg" class="a" alt="Off Image">
<img src="on.png" class="b" alt="On Image">
</div>
이렇게 하시면 될듯 합니다.
답변을 작성하시기 전에 로그인 해주세요.