悬停图片 - 在其上显示div [英] Hover image - display div over it
本文介绍了悬停图片 - 在其上显示div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
悬停时,我想在图片的右上角看到一个链接。就像在你的个人资料图片在Facebook上,它说改变图片。
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".
我试图让它工作与一点jquery,但没有运气,因为它不会去的图像的权利。图像将是不同的大小,因为他们是个人资料图片。
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:
$(".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:
This is the way I done it: 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 。
这篇关于悬停图片 - 在其上显示div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文