제이쿼리 질문 좀 드릴게요 ㅠ 채택완료
바트컨트롤
4년 전
조회 2,469
mouseover와 mouseout은 잘되는데
클릭이 안먹히드라구요
click이 mouseout과 연관이 있는것 같은ㄷ ㅔㅠㅠ
</p>
<p>$(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"));</p>
<p> });
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
답변에 대한 댓글 1개
�
바트컨트롤
4년 전
댓글을 작성하려면 로그인이 필요합니다.
4년 전
//클릭 했을 때 이미지 변경
$('.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"));
}
});
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 5개
B
Big1
4년 전
console.log('_on_ON_test_on.gif'.replace(/_on/i, "_off"));
console.log('_on_ON_test_on.gif'.replace(/_on/ig, "_off"));
console.log('_on_ON_test_on.gif'.replace(/_on/ig, "_off"));
�
바트컨트롤
4년 전
아아 그 역슬러쉬 말씀하신거죠?
음.. on off로
1. 마우스오버랑 마우스아웃은 잘먹힙니다
2. 클릭만 넣었을 때도 잘먹힙니다
3. 근데 같이 넣다보니 클릭하고 마우스를 떼어야하는 현상때문에
이미지 변환된게 유지가 안되드라구요
음.. on off로
1. 마우스오버랑 마우스아웃은 잘먹힙니다
2. 클릭만 넣었을 때도 잘먹힙니다
3. 근데 같이 넣다보니 클릭하고 마우스를 떼어야하는 현상때문에
이미지 변환된게 유지가 안되드라구요
B
Big1
4년 전
아...
클릭하기전에 mouseover가 되기때문에
이미 _on 으로 바뀐상태 아닌가요?
클릭하기전에 mouseover가 되기때문에
이미 _on 으로 바뀐상태 아닌가요?
�
바트컨트롤
4년 전
이게 css에서 말하는..
hover 와 active를 동시에 주려다보니.. 문제가 생긴것 같아요..
1. mouseover : off->on
2. mouseout : on-> off
3. click: on 유지 (active 효과)
하지만 click 하고 마우스가 이탈 되는 과정에서 2번현상이 다시 발생하는 것 같아요
hover 와 active를 동시에 주려다보니.. 문제가 생긴것 같아요..
1. mouseover : off->on
2. mouseout : on-> off
3. click: on 유지 (active 효과)
하지만 click 하고 마우스가 이탈 되는 과정에서 2번현상이 다시 발생하는 것 같아요
�
바트컨트롤
4년 전
이론상 불가능한가 싶기도 하네요...
1번메뉴에서 2번메뉴버튼을 클릭할 때 어쩔 수 없이 마우스가 이탈할텐데..
1번메뉴에서 2번메뉴버튼을 클릭할 때 어쩔 수 없이 마우스가 이탈할텐데..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
맞네요 클래스 줘야겠네요 감사합니다