私のアプリケーションでは、一連の画像が並べて表示されています。ホバリング時に画像に関する情報が表示されます(説明、タイトルなど)。これはほとんどの場合に機能しますが、何度も実行されません。トグリングクラスがうまく機能しない
たとえば、画像をホバリングしてページをリロードすると、この画像の他の方向、つまり、デフォルトでは隠れた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;
}
ありがとうございました!私はあなたの解決策を試しましたが、イメージを浮かべると何も起こりません。私はあなたのコードで "ポスト"をホバリング部分のために働く "postDesc"に変更しようとしましたが、画像からカーソルを取り除くと、そのクラスはそこに残っています。多分私は何か間違っているのですか? – holyredbeard
jsFiddleで更新されました。 –
あなたのコードは私にとってはうまくいかないようです。 jsFiddleからコードを試しましたが、クラスはホバリング時に非常に速く点滅し続けます。 "postDesc"では私は "display:none;"を持っているので、クラスの切り替えがうまくいくのだろうか? – holyredbeard