「コンテンツを表示するコンテンツを隠す」Image Hover

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 readyでclosedに設定されたブール型変数です。

私が問題に抱えているのは、ユーザーがボタンの上にカーソルを置くと、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'); 
     } 
    } 
);