JQuery 마우스 오버 기능이 제대로 작동하지 않습니다.

Question

단일 JQuery 마우스 오버 기능으로 축소하려고하는 mouseover 이미지 (예 : tab1m.jpg)와 함께 세 개의 이미지 (예 : tab1.jpg)가 있습니다. 사용 전 :

$('#tab1').hover(function(){ 
    $(this).attr("src", 'images/tab1m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab1.jpg'); 
}); 
$('#tab2').hover(function(){ 
    $(this).attr("src", 'images/tab2m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab2.jpg'); 
}); 
$('#tab3').hover(function(){ 
    $(this).attr("src", 'images/tab3m.jpg'); 
}, 
function(){ 
    $(this).attr("src", 'images/tab3.jpg'); 
}); 

불필요하게 길고 길었습니다. 그래서로 변경 시도 :

작동되지 않은

$('.navimg').hover(function(){ 
    var tab = ($(this).attr('id')).substring(3,4); 
    $(this).attr('src','images/tab'+tab+'m.jpg'); 
}, 
function(){ 
    $(this).attr('src','images/tab'+tab+'.jpg'); 
}); 

- 때 성공적으로 변경하지만 원래 (tab1.jpg/TAB2/tab3에) 이미지에 복귀하지 않는 이미지를 통해 I 마우스. 아무도 왜 이것이 일어나고 있는지 말해 줄 수 있습니까? 감사!

Answer 1

그것은 변수 탭 UNDEFINE 당신의 두 번째 기능에 becuase, 원래로 되돌릴 수 없습니다.

당신은 문제

Answer 2

두 가지 다른 기능이 있습니다. 두 번째 변수에서 선언 된 변수에 액세스 할 수 없습니다.

()는 호버 외부에서 선언 var tab를 확인 그래서 모두 내부 기능에 액세스 할 수 있습니다 :

var tab = ''; 

$('.navimg').hover(
    function(){ 
     tab = ($(this).attr('id')).substring(3,4); 
     $(this).attr('src','images/tab'+tab+'m.jpg'); 
    }, 
    function(){ 
     $(this).attr('src','images/tab'+tab+'.jpg'); 
    } 
); 

Answer 3

를 해결하기 위해 두 번째 기능에

var tab = ($(this).attr('id')).substring(3,4); 

을 추가 할 수있는 방법을 몇 가지 CSS를 사용하는 방법에 대한?

#tab1{background-image: url(/images/tab1m.jpg)} 
#tab1.hover{background-image: url(/images/tab1.jpg)} 
#tab2{background-image: url(/images/tab2m.jpg)} 
#tab2.hover{background-image: url(/images/tab2.jpg)} 
#tab3{background-image: url(/images/tab3m.jpg)} 
#tab3.hover{background-image: url(/images/tab3.jpg)} 

다음 JQuery와 호버가 될 수 있습니다 : 당신의 '탭'추가 위의 CSS하고 "canHover를 사용하여 'canHover'클래스

<div id="#tab1" class="canHover">Tab 1</div> 
<div id="#tab2" class="canHover">Tab 2</div> 
<div id="#tab3" class="canHover">Tab 3</div> 

각각 다음

$('.canHover').hover(function(){ 
    $(this).addClass('hover'); 
}, 
function(){ 
    $(this).removeClass('hover'); 
}); 

"선택기를 사용하면 원하는 요소에 호버 기능을 추가 할 수 있습니다.