이전 목록 다음
채택완료

마우스 오버? 질문드립니다

달달달달달이
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2024-06-21 (금) 22:14:48 4,392

<img src="off.jpg"  class="a">

<img src="on.png" class="b">

온오프 이미지를 구현하려고 합니다. 

오프인 상태에서 마우스 포인트를 올려놓으면(마우스오버) on이미지가 뜨도록 하고싶은데 참고할만한 자료 있을까요?

그누보드5
|

답변 2개

채택된 답변
+20 포인트
미미니님a
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 2024-06-21 (금) 22:39:04
Copy 
$(".a").mouseover(function(){

$(this).attr('src', 'on.jpg');

}).mouseout(function(){

$(this).attr('src', 'off.jpg');

})
MMin아빠
프로필 보기작성한 질문작성한 답변전체 작성글 보기전체 댓글 보기
 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>

이렇게 하시면 될듯 합니다.

답변을 작성하려면 로그인이 필요합니다.