悬停图片时显示编辑框
Soory，如果我没有向您展示所有代码，因为我不确定如何实现它，我尝试做的是假设这是下面的图片：
#photo{ width:100px;height:120px;}
<div id="photo"><img src="myphoto.jpg"/></div>
并且我有编辑照片框：
#edit{width:60px;height:30px;background:#000000;color:#ffffff}
<div id="edit">edit it</div>
当我悬停图像时，我想要编辑照片框显示在图像的右上角，并且当光标移出图像时，它会消失。
所以我想使用以下
$("#photo img").hover(function() {
$("#edit").fadein();
}, function() {
$("#edit").hide();
});
任何人都可以帮助我，非常感谢！
Soory if I didn't show you all the code, because I am not sure how to implement it, what I try to do is that suppose this is a picture following:
#photo{ width:100px;height:120px;}
<div id="photo"><img src="myphoto.jpg"/></div>
and I have edit photo box:
#edit{width:60px;height:30px;background:#000000;color:#ffffff}
<div id="edit">edit it</div>
When I hover the image, i want the edit phot box display in the top right corner of the image, and when the cursor move out of the image, it will be disappeared.
So I assume using the following
$("#photo img").hover(function() {
$("#edit").fadein();
}, function() {
$("#edit").hide();
});
any one could help me with it, thanks a lot!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
基本上就是这样。您还需要 (a) 在样式表中使用
display:none隐藏加载时的 #edit 元素，(b) 将fadein更改为fadeIn（大写 I），并且可能 (c) 将 #edit 元素绝对放置在 #photo div 内，这样当页面出现和消失时它就不会重排页面。更新：哦，(d) 将鼠标悬停添加到 #edit 元素，这样将鼠标移到其上就不会注册为图像的鼠标移出：
http://jsfiddle.net/mblase75/bNmAd/2/
That's basically it. You also need to (a) hide the #edit element on load using
display:nonein your stylesheet, (b) changefadeintofadeIn(capital I), and probably (c) position the #edit element absolutely inside the #photo div so it doesn't reflow the page when it appears and disappears.update: Oh, and (d) add a mouseover to the #edit element so that moving the mouse over it doesn't register as a mouseout of the image:
http://jsfiddle.net/mblase75/bNmAd/2/