hover图像 – 显示div

在hover时，我想在图像的右上角找到一个链接。 就像你在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：

 
 
Edit
   

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：

 
 
Edit
   

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上测试一下 。

Answer 2

尝试

编辑

Answer 3

如果使imgHover与其内容匹配，那么它应该只有position:relative而hover类的position:absolute和top:0;right:0

http://www.jsfiddle.net/FvBqA/上的示例

Answer 4

使用相对定位使div成为div的背景，并使用overlay：none将覆盖内容样式添加到内部div中

那么imgdiv：hover innerdiv {display：block}就可以了

Answer 5

您需要将链接绝对定位在位置与正常流量不同的容器中。 在这个例子中，我在容器上使用relative。 试试这个：

HTML

 
 
 Edit  
  

CSS

 .imgHover { float: left; } .imgContainer { position: relative; } .imgContainer a { display: block; position: absolute; top: 0; right: 0; background: Green;}