トグリングクラスがうまく機能しない

Question

私のアプリケーションでは、一連の画像が並べて表示されています。ホバリング時に画像に関する情報が表示されます（説明、タイトルなど）。これはほとんどの場合に機能しますが、何度も実行されません。

たとえば、画像をホバリングしてページをリロードすると、この画像の他の方向、つまり、デフォルトでは隠れたdivが表示され、それをホバリングすると隠されます（他のすべての画像でうまく動作します）。

これは実際には迷惑で、解決方法はわかりません。以下はこれのコードです（うまくいけば十分です）。

誰かが私を助けてくれるのであれば、私は感謝します。

JS：

$('.post').hover(function() { 
     var image = $(this); 
     image.find('.postDesc').toggle(); 
    }); 

HTML：

<div class="post"> 
    <img class="images" src="../images/image.png"> 
    <div class="postDesc"> 
     // other code... 

CSS：

.post { 
    background: white; 
    width: 200px; 
    height: 200px; 
    margin: 0px auto; 
    float: left; 
    margin-right: 30px; 
    margin-bottom: 30px; 
    position: relative; 
    padding: 5px; 
    -moz-box-shadow: 0 0 4px 1px #777; 
    -webkit-box-shadow: 0 0 4px 1px#777; 
    box-shadow: 0 0 4px 1px #777; 
} 

.postDesc { 
    background-color:rgba(136, 136, 136, 0.35); 
    color: white; 
    width: 180px; 
    height:180px; 
    display:none; 
    position:absolute; 
    margin: 5px; 
    left: 0; 
    bottom: 0; 
    padding: 10px; 
} 

Answer 1

私が代わりにtoggleClassメソッドを使用してみます：

$(this).find(".postDesc").toggleClass("post"); 

デモンストレーションについては、this jsFiddleを参照してください。

Answer 2

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