0

私のアプリケーションでは、一連の画像が並べてリストされています。画像にカーソルを合わせると、画像に関する情報が表示されます (説明、タイトルなど)。これはほとんどの場合に機能しますが、多くの場合は機能しません。

たとえば、画像をホバリングしてページをリロードすると、この画像ではトグルが反対方向に機能します。デフォルトでは、非表示の 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;
}
4

2 に答える 2

2

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

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

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

于 2012-05-07T18:46:13.697 に答える
0 
$('.post').hover(
 function () {
     $('.postDesc', $(this)).addClass('post');
 },
 function() {
     $('.postDesc', $(this)).removeClass('post');
 });
于 2012-05-07T19:00:29.680 に答える