jquery - 悬停图像 - 在其上显示 div

Question

悬停时，我希望在图像的右上角出现一个链接。就像您在 Facebook 上的个人资料照片上写着“更改图片”一样。

我曾尝试使用一些 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:

<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:

.imgHover .hover { 
    display: none;
    position:absolute;
    z-index: 2;

}

谢谢!

Answer 1

我是这样做的: CSS:

.imgHover {
    display: inline;
    position: relative;
}
.imgHover .hover {
    display: none;
    position: absolute;
    right:0;
    z-index: 2;
}

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();
        });
});

在 jsfiddle 上测试这个.