제이쿼리 질문 좀 드릴게요 ㅠ
본문
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")
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번메뉴버튼을 클릭할 때 어쩔 수 없이 마우스가 이탈할텐데..
//클릭 했을 때 이미지 변경
$('.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"));
}
});
