悬停图片-在其上显示div

Question

悬停图片-在其上显示div

7

当鼠标悬停在图片上时，我想在图片的右上方出现一个链接。就像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;

}

谢谢！

- ryryan

你的问题是想把它放在右上角，还是完全放在旁边？ - Nick Craver

5个回答

2

如果imgHover要与其内容匹配，那么它应该只有"position:relative"，而hover类应该有"position:absolute"和"top:0;right:0"。

示例请参见http://www.jsfiddle.net/FvBqA/。

- Gabriele Petrioli

这不就是我的答案吗？ - Bazzz

@Bazzz，还是和我的一样吗？:p 我们大约同时发布了.. - Gabriele Petrioli

如果您点击“最旧”的选项卡，您会发现我的略微比您的旧一些，但确实我们是在同一时间发布的。让我们说“英雄所见略同”，并同时发布 :) - Bazzz

没问题 @Bazzz :) (我知道你先发了..只是开个玩笑) - Gabriele Petrioli

@Gaby，它们之间有一点不同。.hover具有right:0、z-index:2和display:none。+ .imgHover具有display:inline。无论如何，谢谢 :) - ryryan

显示剩余2条评论

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>

</body> </html>

- simshaun

谢谢，但链接显示在图像底部。 :/ - ryryan

您更改了某些内容或未提供一些正在更改它的代码。如果您单独运行我的示例，您将看到它按预期工作（编辑图像右上角的链接）。 - simshaun

谢谢你的帮助，但是它没有起作用。最终我还是成功了。 - ryryan

1

将您的图像设置为相对定位的 div 的背景，并在其中添加带有覆盖内容的内部 div，使用 display:none 样式进行样式设置。

然后，imgdiv:hover innerdiv{display:block} 就可以实现效果了。

- Alexander Taran

1

你需要将链接在一个位置不同于正常流的容器中进行绝对定位。在这个例子中，我使用相对定位来定位容器。请尝试以下代码：

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

- Bazzz

这个也没有运气。:( - ryryan

我可以问一下为什么吗？也许我误解了您的要求，但是如果我在这里看 http://jsfiddle.net/C4LSz/ ，我清楚地看到编辑链接位于图像右上角，并带有绿色背景。 - Bazzz

是的，抱歉，那是我的错，我尝试使用jQuery让它在鼠标悬停在图像上时显示，但没有成功。无论如何，还是谢谢！ :) - ryryan

啊，我明白了，这是因为我通过查找带有“css”标签的未回答问题来找到了你的问题，所以我认为你的问题与css有关。 :) 现在我看到你使用的第一个标签是jquery。 - Bazzz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ryryan · Accepted Answer

这是我完成它的方法： 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上测试此代码。