пытается создать меню с JQuery, но мой код разве работает

Question

я пытаюсь создать меню с 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'); 
     }) 
    }); 

, но это не кажется, что работать

Answer 1

свяжите 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');  
}); 

DEMO

Примечание:

• $('.img') должен быть $('img'), потому что изображение не имеет класс с именем img, . селектор является использование для класса доступа. прочитать о selectors, а также class-selector

Answer 2

Вашей проблемы здесь:

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

$(this) является img, то parent() является div.span8.img и siblings() не ... нет.

Try с:

$(this).next('.like-box')