0

ユーザーが要素にマウスオーバーすると、メニューが表示され、ユーザーがマウスを離すと非表示になるように、jQueryを使用してメニューを作成しようとしています。

私のhtmlコード:

<div class="span8 img">
   <img src="http://farm4.staticflickr.com/3198/2978120072_ca00381e08.jpg" alt="" width="550px" height="368px">
   <div class="like-box">Like</div> 
</div>

CSS:

.like-box {
    display: block;
    background: rgba(255, 255, 255, .9);
    padding: 15px;
    position: absolute;
    left: -1px;
    width: 94%;
    bottom: -1px;
    display: none;
}

Javascript:

$('.img').mouseover(function() {
        $(this).parent().siblings('.like-box').css('display', 'block');
        $(this).parent().siblings('.like-box').mouseleave(function() {
        $(this).css('display', 'none');
        })
    });

しかし、これはうまくいかないようです。

4

2 に答える 2

2

mouseleaveイベントをマウスオーバー内にバインドします。これは、imgイベントをマウスオーバー内にバインドするため、毎回 mouseleave イベントをバインドするためlike-boxです。これは良くなく、不要です。

$('.like-box').mouseleave(function() {
    $(this).css('display', 'none');
})
$('img').mouseover(function() {
    $(this)  // this point to img
      .next('.like-box')  // point to like-box
      .css('display', 'block');       
});

デモ

ノート：

  • $('.img')$('img')イメージには というクラスがなくimg、.セレクターはアクセスクラスに使用されるためです。セレクターとクラスセレクターについて読む
于 2012-05-30T06:23:44.033 に答える
1

あなたの問題はここにあります：

$(this).parent().siblings('.like-box')

$(this)はimg、parent()はdiv.span8.img、siblings()は ... なし。

試してみてください：

$(this).next('.like-box')
于 2012-05-30T06:25:33.253 に答える