悬停图像 - 在其上显示 div

Hover image - display div over it(悬停图像 - 在其上显示 div)

问题描述

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".

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="aHR0cDovL2ltZzE0LmltYWdlc2hhY2sudXMvaW1nMTQvOTY5OC8yOTU4ODE2Ni5qcGc=" alt="IiAvJmd0OwombHQ7L2RpdiZndDsKPC9jb2RlPjwvcHJlPjxwPkNTUzo8L3A+PHByZT48Y29kZSBjbGFzcz0="language-html'>.imgHover .hover { 
    display: none;
    position:absolute;
    z-index: 2;

}

Thanks!

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="aHR0cDovL2ltZzE0LmltYWdlc2hhY2sudXMvaW1nMTQvOTY5OC8yOTU4ODE2Ni5qcGc=" alt="IiZndDsKJmx0Oy9kaXYmZ3Q7CjwvY29kZT48L3ByZT48cD5KUXVlcnk6PC9wPjxwcmU+PGNvZGUgY2xhc3M9"language-html'>$(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();
        });
});

Test this on jsfiddle.

这篇关于悬停图像 - 在其上显示 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！