0

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

4

4 回答 4

2

试试这个小提琴

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;
}​
于 2012-12-18T08:42:06.633 回答
1

这是你要找的吗？

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/

我所做的是：

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

你也可以做

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

让它看起来不错！

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

于 2012-12-31T02:57:39.903 回答
0

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

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

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

于 2012-12-17T16:46:38.053 回答
0

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

于 2012-12-17T16:53:55.920 回答