IF ELSE Hover 문은 두 번째 호버에서만 작동합니다.

Question

이미지에 롤오버 할 때 이미지에 활성 클래스가 연결되어 있지 않으면 메뉴가 있습니다. 내 문제는 첫 번째가 아닌 두 번째 롤에서만 이미지가 변경된다는 것입니다. 이것이 어떤 아이디어인지. 당신이 다른 블록까지 hover에 두 번째 호출을하지 않기 때문에 그것은이다

$("#contact").hover(function() { 
    if ($("#contact").is(".active")) { 
     $("#contact img").attr("src","Images/Menu/contact_hover.png") 
    } 
    else { 
     $("#contact").hover(function() { 
       $("#contact img").attr("src","Images/Menu/contact_hover.png") 
      }, 
      function() { 
      $("#contact img").attr("src","Images/Menu/contact.png") 
     }); 
    } 
}); 

Answer 1

당신은 jQuery를 함께이 일을해서는 안된다, 정말 필요가 없습니다. CSS Image sprites에 읽어이 같은 CSS를 가져가 선택기 사용하십시오 :

#contact { 
    background: url(/url/of/img) no-repeat; 
} 

#contact:hover { 
    background-position: ; // Change to desired image 
} 

당신이 게으른 경우에 대신하여 귀찮게의 altogther 이미지를 바꿀 수, 사용하는 이미지 스프라이트의 배경 위치를 변경하려면이 작업을 수행을 스프라이트. 이 방법은 보다 가벼우 며 호환성은입니다.

Answer 2

처음으로 실행됩니다. 모든 이벤트 처리기를 $(document).ready에 설정하면 잘 수행해야합니다.

Answer 3

당신은 당신의 코드를 단순화한다 -에서이

$("#contact").hover(function() { 
    if (!$("#contact").hasClass("active")) { 
     $("#contact img").attr("src","Images/Menu/contact_hover.png") 
    } 
}, 
function() { 
    if (!$("#contact").hasClass("active")) { 
     $("#contact img").attr("src","Images/Menu/contact.png") 
    } 
}); 

Answer 4

작동 예를보십시오 : http://jsfiddle.net/HNGMT/

이 ** 예는없는 active 하나의 클래스 하나의 차이를 보여주기 위해이 개 된 div를 사용합니다. 법원의 HTML은 데모 용도로만 사용됩니다. contact 클래스의 jQuery 선택기는 id 선택기를 반영하도록 수정됩니다.

HTML :

<div class="contact"><img src="/contact.png" alt="contact inactive" /></div> 
<div class="contact active"><img src="/contact.png" alt="contact active" /></div> 

자바 스크립트 :

$(".contact").hover(function() { 
    $(this).find("img").attr({src:"contact_hover.png", alt:"contact hover"}); 
}, function(){ 
    var ele = $(this); 
    if(!ele.hasClass("active")){ 
     ele.find("img").attr({ src:"contact.png", alt:"contact inactive"}); 
    } 
});