悬停图像 - 在其上显示 div

Posted

技术标签:

【中文标题】悬停图像 - 在其上显示 div【英文标题】:Hover image - display div over it 【发布时间】:2011-05-17 10:44:53 【问题描述】:

悬停时,我希望在图片的右上角出现一个链接。就像您在 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"  />
</div>

CSS:

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


谢谢!

【问题讨论】:

你想要的问题是在右上角还是在它旁边? 【参考方案1】:

这就是我的做法: 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" >
</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 上进行测试。

【讨论】:

【参考方案2】:

如果 imgHover 是为了匹配它的内容,那么它应该只有 position:relative 并且悬停类有 position:absolutetop:0;right:0

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

【讨论】:

这不是和我的回答一样吗? @Bazzz,还是你的和我的一样? :p 我们一定是在同一时间发布的.. 如果您单击“最旧”选项卡,您会看到我的“刚好”在您的上方,所以稍微旧一点,但实际上我们几乎在同一时间发布。让我们说“伟大的思想相似”并同时发布:) 这是一笔交易@Bazzz :) (我知道你先发帖……只是在开玩笑 感谢您的帮助,但没有成功。我最终做到了【参考方案3】:

您需要将链接绝对定位在位置与正常流程不同的容器中。在这个例子中,我在容器上使用 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"  />
  </div>
</div>

CSS

.imgHover  float: left; 
.imgContainer  position: relative; 
.imgContainer a  display: block; position: absolute; top: 0; right: 0; background: Green;

【讨论】:

也没有运气。 :( 请问为什么?也许我误解了你的要求,但如果我看这里jsfiddle.net/C4LSz,我清楚地看到图片右上角有绿色背景的编辑链接。 是的,对不起,这是我的错,我没有运气将它与 jquery 一起使用,如果你将鼠标悬停在图像上,它就会显示出来。不管怎么说,还是要谢谢你! :) 啊,我明白了,这是因为我通过查找带有标签“css”的未回答问题找到了您的问题,所以这就是为什么我认为您的问题与 css 相关。 :) 我现在确实看到您使用的第一个标签是 jquery。【参考方案4】:

试试

<!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" ></div>

</body> </html>

【讨论】:

谢谢,但链接显示在图片底部。 :// 您已经更改了某些内容或没有提供一些正在更改它的代码。如果您单独运行我的示例,您会看到它按预期工作(编辑图片右上角的链接)。 感谢您的帮助,但没有成功。我最终做到了【参考方案5】:

使您的图像成为具有相对定位的 div 的背景 并使用覆盖内容向其添加内部 div 使用 display:none 设置样式

那么 imgdiv:hover innerdiv显示:块 会成功的

【讨论】:

以上是关于悬停图像 - 在其上显示 div的主要内容,如果未能解决你的问题,请参考以下文章

jquery悬停列表项并在另一个div中显示图像,列表是动态的

将鼠标悬停在图像上时需要 CSS 效果,以获取另一个图像和/或文本以显示在其上方

在图像鼠标悬停时在父 div 中显示大的可点击图像

在图像悬停上显示 text-div

悬停时在图像上显示标题[重复]

我可以在显示后禁用过渡吗?