<img src="off.jpg" class="a">
<img src="on.png" class="b">
온오프 이미지를 구현하려고 합니다.
오프인 상태에서 마우스 포인트를 올려놓으면(마우스오버) on이미지가 뜨도록 하고싶은데 참고할만한 자료 있을까요?
|
답변 2개
채택된 답변
+20 포인트
2024-06-21 (금) 22:39:04
Copy
$(".a").mouseover(function(){
$(this).attr('src', 'on.jpg');
}).mouseout(function(){
$(this).attr('src', 'off.jpg');
})Min아빠
2024-06-21 (금) 22:35:18
Copy
<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>이렇게 하시면 될듯 합니다.
답변을 작성하려면 로그인이 필요합니다.