悬停时编辑链接答案

【问题标题】：Edit link on hovering悬停时编辑链接
【发布时间】：2012-12-31 16:13:02
【问题描述】：

如何在头像上显示编辑链接，就像在 facebook 上一样，但位于图片的右上角？

HTML 代码：

<div class="topgrid">
     <a href="#"><img src="C:/images/users/image1.png"/>               
        <span class="image" id="image">Edit Picture</span>
     </a>
</div>

CSS 代码：

.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}

.topgrid:hover .image{
display:block;
cursor:pointer;
}

.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}

我这里使用的是 span 元素的固定宽度，但是当我没有指定 span 元素的宽度时，该元素不会出现在绝对右上角。所以我必须将正确的属性调整为：

right:13%;

这不是标准的方法。我需要您的宝贵建议！

我也在这里附上试用过的小提琴！

http://jsfiddle.net/nQvEW/81/

【问题讨论】：

你试过了吗？
@SumitGera：是的，你应该这样做。请阅读上述评论中的链接，了解您需要在问题中包含哪些内容。
你读过How to ask
使用 OP 上的“编辑”链接！
@Munchies。我已经插入了尝试过的代码..请帮帮我..

标签： html css

【解决方案1】：

试试这个Fiddle

css:

.image {
  position:relative;
  color:#033;
  font-size:12px;
  background:#FFF;
  display:none;
  top:0;
}

.topgrid:hover .image{
  display:block;
  cursor:pointer;
  position:relative;
  width:auto;
  background:none;
  top:-205px;
}

.topgrid {
  text-align:right;
  width:300px;
  height:200px;
  margin:20px;
}

【讨论】：

我附上了小提琴，这个实例适用于具有固定宽度的跨度元素，但跨度元素没有固定宽度！请帮忙！

【解决方案2】：

这是您要找的吗？

span元素没有固定宽度，一直在右上角！

.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}

.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}

.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}

这是更新后的 Fiddle：http://jsfiddle.net/b6Yw6/15/

我所做的是：

将跨度宽度设置为 auto 并设置为 float:right。
从 span 中删除了 position:absolute;top:0;right:0 属性。如果导致浏览器兼容性问题，请添加它们

你也可以这样做

.image{
   background:transparent;
   color:white;
   font-weight:500;
}

让它看起来不错！

根据您的要求，这是新的Fiddle！告诉我是否还有其他需要进行的更改。

【讨论】：

这与我一直在寻找的非常接近，但“编辑图片”元素的宽度应限制为“编辑图片”字符串，并且应位于右上角。虽然很努力！
@SumitGera 我已经用新的 Fiddle 更新了答案。您可以在答案底部找到链接。
谢谢。除了一些自定义样式外，这完全符合我的要求。我只需要在我的网站上实施。
也许我可以帮助您处理这些自定义样式

【解决方案3】：

第一步是让图像成为背景图像，而不是直接的<img> 标签。这将允许您添加子节点。

添加一个这样的子节点：编辑链接。让它出现在你想要的位置，暂时忽略“仅在悬停时”部分。

准备好后，添加display:none。然后，在容器的:hover 样式中（即#container:hover>#editlink），添加display:block。完成。

【讨论】：

【解决方案4】：

或者您可以在每次悬停时使用动态html标签生成

【讨论】：