在悬停时,我想在图像的右上方显示一个链接.就像你在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;
- }
谢谢!
解决方法
这就是我这样做的方式:
CSS:
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上测试一下.