jQuery 悬停图像 - 在其上显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4306801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hover image - display div over it
提问by ryryan
On hover I want a link apear at the top-right of the image. Just like on your profile picture on Facebook, where it says "Change Picture".
在悬停时，我想要一个链接出现在图像的右上角。就像您在 Facebook 上的个人资料图片上一样，上面写着“更改图片”。
I have tried to to get it working with a bit of jquery but had no luck, as it doesn't go t the right of the image. The images are going to be different sizes as they are profile pictures. So whatever the size, it needs to stay at the top-right of the image.
我试图让它与一些 jquery 一起工作，但没有运气，因为它不在图像的右侧。由于是个人资料图片，因此图像将具有不同的大小。所以无论大小，它都需要保持在图像的右上角。
JQuery:
查询：
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.25)
.end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1)
.end().children(".hover").hide();
});
HTML:
HTML：
<div class="imgHover">
<div class="hover"><a href="htpp://google.com">Edit</a></div>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" />
</div>
CSS:
CSS：
.imgHover .hover {
display: none;
position:absolute;
z-index: 2;
}
Thanks!
谢谢！
回答by ryryan
This is the way I done it: CSS:
这是我完成它的方式：CSS：
.imgHover {
display: inline;
position: relative;
}
.imgHover .hover {
display: none;
position: absolute;
right:0;
z-index: 2;
}
HTML:
HTML：
<div class="imgHover">
<div class="hover"><a href="htpp://google.com">Edit</a></div>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="">
</div>
JQuery:
查询：
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.85).end().children(".hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
});
Test this on jsfiddle.
在jsfiddle上测试这个。
回答by simshaun
Try
尝试
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <style> .imgHover { display: inline; position: relative; } .imgHover .hover { display: none; position: absolute; right: 5px; top: 5px; z-index: 2; } </style> </head><body> <script> $(function() { $(".imgHover").hover( function() { $(this).children("img").fadeTo(200, 0.25).end().children(".hover").show(); }, function() { $(this).children("img").fadeTo(200, 1).end().children(".hover").hide(); }); }); </script>
<div class="imgHover"><div class="hover"><a href="htpp://google.com">Edit</a></div><img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt=""></div>
</body> </html>
回答by Gabriele Petrioli
If the imgHover is made to match its contents, then it should just have position:relativeand the hover class have position:absoluteand top:0;right:0
如果使 imgHover 与其内容匹配，则它应该具有position:relative并且悬停类具有position:absolute和top:0;right:0
Example at http://www.jsfiddle.net/FvBqA/
回答by Bazzz
You need to absolute position the link in a container that has position different than the normal flow. In this example I use relative for that on the container. Try this:
您需要将链接绝对定位在位置与正常流不同的容器中。在这个例子中，我在容器上使用了相对。尝试这个：
HTML
HTML
<div class="imgHover">
<div class="imgContainer">
<a href="http://google.com">Edit</a>
<img src="http://img14.imageshack.us/img14/9698/29588166.jpg" alt="" />
</div>
</div>
CSS
CSS
.imgHover { float: left; }
.imgContainer { position: relative; }
.imgContainer a { display: block; position: absolute; top: 0; right: 0; background: Green;}
回答by Alexander Taran
make your image a background for div with relative positioning and add inner div to it with the overlay content style it with display:none
使您的图像成为具有相对定位的 div 的背景，并使用 display:none 的叠加内容样式为其添加内部 div
then imgdiv:hover innerdiv{display:block} will do the trick
然后 imgdiv:hover innerdiv{display:block} 会做的伎俩
