Question

如何在个人资料图片上显示编辑链接，就像在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/

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

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

这是更新后的小提琴：http://jsfiddle.net/b6Yw6/15/

我所做的是：

将跨度宽度设为自动，并提供 float：right 。
从span移除 position：absolute; top：0; right：0 属性。如果它导致浏览器兼容性问题，请添加它们

您也可以

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

让它看起来很棒！

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

Answer 3

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

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

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

Answer 4

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

编辑悬停时的链接

4 个答案: