悬停图像 - 在其上显示div

问题描述：

悬停时，我想要图像右上方的链接apear。就像在Facebook上的个人资料图片上，它说“更改图片”。悬停图像 - 在其上显示div

我试图让它有点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; 

}

谢谢！

是你想要它在右上角还是在它旁边？ – 2010-11-29 18:34:06

答

这是我做的方式： 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的：在jsfiddle

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

测试此。

答

，使图像的DIV背景与相对定位和内部的div添加到它与覆盖内容风格它显示：无

然后 imgdiv：悬停innerdiv {显示：块} 会做招

答

尝试

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

谢谢，但链接显示在图像的底部。：/ – ryryan 2010-11-29 19:44:57

你已经改变了一些东西，或者没有提供一些改变它的代码。如果您单独运行我的示例，则会看到它按预期工作（编辑图像右上方的链接）。 – simshaun 2010-11-29 20:47:13

感谢您的帮助，但没有奏效。我设法做到这一点 – ryryan 2010-12-02 13:58:50

答

你需要绝对位置具有比正常流量的不同位置在容器的链接。在这个例子中，我在容器上使用相对的。试试这个：

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

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

答

如果imgHover由以匹配其内容，那么它应该只是position:relative和悬停类有position:absolute和top:0;right:0

http://www.jsfiddle.net/FvBqA/

悬停图像 - 在其上显示div

相关推荐