"콘텐츠 숨기기 콘텐츠 표시"이미지 가리개

Question

페이지로드시 "콘텐츠 표시"라는 버튼이 있는데 클릭하면 콘텐츠가 표시되고 "콘텐츠 숨기기"버튼으로 전환됩니다. 이것은 아래의 코드에 따라 훌륭하게 작동합니다.

$('div.content').hide(); 

$('img.contentslide').click(function() { 
    $('div.content').toggle(1500,function() { 
     if (jQuery.browser.msie) {       // Lines 15-17 = special treatment for IE, because of 
      this.style.removeAttribute('filter');   // lack of support for ClearType font rendering on items 
     }             // being toggled in jQuery. 
    }); 
     if (slideState == 'closed') { 
      $('img.contentslide').attr('src','images/hidecontentstd.png'); 
      slideState = "open";  

     } else { 
      $('img.contentslide').attr('src','images/showcontentstd.png'); 
      slideState = "closed"; 
     } 
}); 

slideState는 DOM 준비가 완료되도록 설정된 부울 변수입니다.

내가 가지고있는 문제점은 마우스를 가져 가면 버튼 위로 마우스를 가져 가면 RELEVANT 호버 이미지가 표시됩니다 (즉, slideState가 열려있을 때 숨기기 콘텐츠 가리개, slideState가 닫힌 경우 표시 콘텐츠가 가리켜 짐).). 나는이 다음 시도했습니다

:

하지만 행운과 http://www.foryourlungsonly.net/2007/10/jquery-image-swap/. CSS 호버를 사용하고 싶지 않습니다.

Answer 1

.click()으로 올바른 이미지를 선택했지만 .hover() 이벤트가있는 경우와 동일한 작업을 수행 할 수 있습니다.

$('img.contentslide').hover(function() { 
     if (slideState == 'closed') { 
      $(this).attr('src','images/closedHover.png'); 
     } else { 
      $(this).attr('src','images/openHover.png'); 
     } 
    }, 
    function() { 
     if (slideState == 'closed') { 
      $(this).attr('src','images/closedNoHover.png'); 
     } else { 
      $(this).attr('src','images/openNoHover.png'); 
     } 
    } 
);