ユーザーが要素にマウスオーバーすると、メニューが表示され、ユーザーがマウスを離すと非表示になるように、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');
})
});
しかし、これはうまくいかないようです。