[英]Trying to create a menu with jQuery but my code isn't working
I am trying to create a menu with jQuery as in when the user mouseover an element the menu would show up and would hide when user moves the mouse away. 我正在尝试使用jQuery创建菜单,如当用户将鼠标悬停在某个元素上时,菜单将显示,而当用户将鼠标移开时,菜单将隐藏。
My html code: 我的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: CSS:
.like-box {
display: block;
background: rgba(255, 255, 255, .9);
padding: 15px;
position: absolute;
left: -1px;
width: 94%;
bottom: -1px;
display: none;
}
Javascript: Javascript:
$('.img').mouseover(function() {
$(this).parent().siblings('.like-box').css('display', 'block');
$(this).parent().siblings('.like-box').mouseleave(function() {
$(this).css('display', 'none');
})
});
but this doesn't seem to work. 但这似乎不起作用。
Bind the mouseleave
event out of img
mouseover, because binding event within mouseover, bind the mouseleave event to like-box
each time, which is not good and unnecessary. 将
mouseleave
事件绑定到img
mouseover之外,因为mouseover内的绑定事件每次都会将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');
});
NOTE: 注意:
$('.img')
should be $('img')
because you image has no class called img
, .
$('.img')
应该是$('img')
因为您的图像没有名为img
类.
selector is use for access class. Your problem is here: 您的问题在这里:
$(this).parent().siblings('.like-box')
$(this)
is img
, the parent()
is div.span8.img
, and the siblings()
are...none. $(this)
是img
, parent()
是div.span8.img
,而siblings()
则是...无。
Try with: 尝试:
$(this).next('.like-box')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.