SIR
목록으로
이전글 다음글

제이쿼리 질문 좀 드릴게요 ㅠ 채택완료

바바트컨트롤
프로필 보기이 회원 글보기이 회원의 댓글보기
 4년 전 조회 2,506
답변 3
목록

mouseover와 mouseout은 잘되는데

클릭이 안먹히드라구요

click이 mouseout과 연관이 있는것 같은ㄷ ㅔㅠㅠ

Copy 
$(function() {
    //클릭 했을 때 이미지 변경
    $('.nav-link img').on('click', function() {
        $(this).attr("src", $(this).attr("src").replace("_off","_on"));
    });
    //hover 했을 때 이미지 변경
    $(".nav-link img").mouseover(function() {
        $(this).attr("src", $(this).attr("src").replace("_off","_on"));
    });
    //mouse out 했을 때 이미지 변경
    $(".nav-link img").mouseout(function() {
        $(this).attr("src", $(this).attr("src").replace("_on", "_off"));

    });
});
#jquery

답변 3개

채택된 답변
+20 포인트

click에서 active 클래스를 주고 mouseout때 active가 있다면 변환을 안하도록 분기해주셔야될거같네요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

아아아아아아아
맞네요 클래스 줘야겠네요 감사합니다

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

//클릭 했을 때 이미지 변경
    $('.nav-link img').on('click', function() {
        $(this).addClass("active").attr("src", $(this).attr("src").replace("_off","_on"));
    });
//mouse out 했을 때 이미지 변경
    $(".nav-link img").mouseout(function() {
        if(!$(this).hasClass("active") {  // active 클래스를 가지고있지 않을때 변경
            $(this).attr("src", $(this).attr("src").replace("_on", "_off"));
        }
    });
로그인 후 평가할 수 있습니다

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

.replace("_on", "_off")

가 잘못된 것 같아요 

정규식으로

.replace(/_on/, "_off")

로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

console.log('_on_ON_test_on.gif'.replace(/_on/i, "_off"));
console.log('_on_ON_test_on.gif'.replace(/_on/ig, "_off"));
아아 그 역슬러쉬 말씀하신거죠?
음.. on off로
1. 마우스오버랑 마우스아웃은 잘먹힙니다
2. 클릭만 넣었을 때도 잘먹힙니다
3. 근데 같이 넣다보니 클릭하고 마우스를 떼어야하는 현상때문에
이미지 변환된게 유지가 안되드라구요
아...
클릭하기전에 mouseover가 되기때문에
이미 _on 으로 바뀐상태 아닌가요?
이게 css에서 말하는..
hover 와 active를 동시에 주려다보니.. 문제가 생긴것 같아요..

1. mouseover : off->on
2. mouseout : on-> off
3. click: on 유지 (active 효과)
하지만 click 하고 마우스가 이탈 되는 과정에서 2번현상이 다시 발생하는 것 같아요
이론상 불가능한가 싶기도 하네요...
1번메뉴에서 2번메뉴버튼을 클릭할 때 어쩔 수 없이 마우스가 이탈할텐데..

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

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

로그인
🐛 버그신고