悬停图像 - 显示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".

在悬停时，我想在图像的右上角找到一个链接。就像你在Facebook上的个人资料图片上所说的“改变图片”一样。

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，但没有运气，因为它没有图像的右侧。由于它们是轮廓图像，因此图像将具有不同的尺寸。因此无论大小如何，它都需要保持在图像的右上角。

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:

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:

CSS：

.imgHover .hover { 
    display: none;
    position:absolute;
    z-index: 2;

}

Thanks!

谢谢！

5 个解决方案

#1

This is the way I done it: CSS:

这就是我的方式：CSS：

.imgHover {
    display: inline;
    position: relative;
}
.imgHover .hover {
    display: none;
    position: absolute;
    right:0;
    z-index: 2;
}

HTML:

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:

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

Test this on jsfiddle.

在jsfiddle上测试一下。

#2

Try

尝试

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

#3

If the imgHover is made to match its contents, then it should just have position:relative and the hover class have position:absolute and top:0;right:0

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

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

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

#4

make your image a background for div with relative positioning and add inner div to it with the overlay content style it with display:none

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

then imgdiv:hover innerdiv{display:block} will do the trick

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

#5

You need to absolute position the link in a container that has position different than the normal flow. In this example I use relative for that on the container. Try this:

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

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;}

#1

This is the way I done it: CSS:

这就是我的方式：CSS：

.imgHover {
    display: inline;
    position: relative;
}
.imgHover .hover {
    display: none;
    position: absolute;
    right:0;
    z-index: 2;
}

HTML:

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:

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

Test this on jsfiddle.

在jsfiddle上测试一下。

#2

Try

尝试

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

#3

If the imgHover is made to match its contents, then it should just have position:relative and the hover class have position:absolute and top:0;right:0

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

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

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

#4

make your image a background for div with relative positioning and add inner div to it with the overlay content style it with display:none

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

then imgdiv:hover innerdiv{display:block} will do the trick

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

#5

You need to absolute position the link in a container that has position different than the normal flow. In this example I use relative for that on the container. Try this:

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

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;}

秒客网

悬停图像 - 显示div

5 个解决方案

#1

#2

#3

#4

#5

#1

#2

#3

#4

#5

相关文章