尝试使用 jQuery 创建菜单,但我的代码不起作用
Trying to create a menu with jQuery but my code isn't working
我正在尝试使用 jQuery 创建一个菜单,因为当用户将鼠标悬停在元素上时,菜单会显示并在用户将鼠标移开时隐藏。
我的网页代码:
<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');
})
});
但这似乎行不通。
将
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
的类,.
选择器用于访问类。 阅读有关选择器和类选择器的信息
你的问题在这里:
$(this).parent().siblings('.like-box')
$(this)
是img
,parent()
是div.span8.img
,siblings()
是...没有。
尝试:
$(this).next('.like-box')
相关文章:
- 元素在我的代码中不会.fadeTo.Don'I don’我不知道;s错误的JavaScript、JQuery、H
- 验证我的代码json
- 如何创建更好的方式来维护基于我的代码访问的最后一个页面
- 我不知道为什么我的代码是错误的?又有什么错
- 我需要一个jQuery函数来只工作在700px以上的屏幕大小,无法在我的代码中发现错误
- I'我不知道为什么我的代码没有'不起作用
- 为什么动态加载的事件在我的代码中不能正常工作
- 如何禁用我的切换按钮?这是我的代码
- 我需要将条形图集成到我的代码中
- onbeforeunload事件在我的代码中没有触发,但其他示例可以工作
- 我的代码在<脚本>标记,但没有'不能在外部文件中工作
- 在我的代码中,实体类"卡片展示”;不起作用
- Webrtc和socket.io:createanswer()总是有一个错误.为什么?我的代码连接了两个对等体,但其中只
- 我的代码很完美,但我现在不知道为什么我发现了问题
- Html、css和jQuery.我的代码有问题
- 鼠标事件,我的代码出了什么问题
- 我怎样才能修复我的代码,以便<罢工>不会使我的 Javascript 代码无效
- 如何在我的“代码块”中使表格 Squarespace 网站响应式
- 如何使我的代码更快
- 在我的代码中管理大量硬编码数据的最佳方法