제이쿼리 질문 좀 드릴게요 ㅠ

제이쿼리 질문 좀 드릴게요 ㅠ

QA

제이쿼리 질문 좀 드릴게요 ㅠ

본문

mouseover와 mouseout은 잘되는데

클릭이 안먹히드라구요

 

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

 


$(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"));
    });
});

 

이 질문에 댓글 쓰기 :

답변 3

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

 

 

.replace("_on", "_off")

가 잘못된 것 같아요 

정규식으로

.replace(/_on/, "_off")

아아 그 역슬러쉬 말씀하신거죠?
음.. on off로
1. 마우스오버랑 마우스아웃은 잘먹힙니다
2. 클릭만 넣었을 때도 잘먹힙니다
3. 근데 같이 넣다보니 클릭하고 마우스를 떼어야하는 현상때문에
이미지 변환된게 유지가 안되드라구요

이게 css에서 말하는..
hover 와 active를 동시에 주려다보니.. 문제가 생긴것 같아요..

1. mouseover : off->on
2. mouseout : on-> off
3. click:  on 유지 (active 효과)
하지만 click 하고 마우스가 이탈 되는 과정에서 2번현상이 다시 발생하는 것 같아요

//클릭 했을 때 이미지 변경
    $('.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"));
        }
    });
답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT