試圖建立與jquery的菜單，但我的代碼心不是工作

我想創建與jquery的菜單中，當用戶將鼠標懸停元素的菜單會顯示出來，並會隱藏當用戶移動鼠標移開試圖建立與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'); 
     }) 
    });

，但這似乎沒有工作

來源

2012-05-30 hilarl

綁定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

來源

2012-05-30 06:23:44 thecodeparadox

你的問題是在這裏：

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

$(this)是img，該parent()是div.span8.img和siblings()是...沒有。

嘗試：

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

來源

2012-05-30 06:25:33 elclanrs

我試過了，仍然沒有工作：/ – hilarl

確定它的工作，我有選擇的名字拼錯了。但它不會隱藏在mouseout上。但是我有代碼$（this）.next（'。like-box'）。mouseleave（function（）{ \t \t $（this）.css（'display'，'none'）; \t \t}） ; – hilarl

試圖建立與jquery的菜單，但我的代碼心不是工作

回答

相關問題