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

更新された Fiddle は次のとおり http://jsfiddle.net/b6Yw6/15/

私がやったことは次のとおりです。

  1. スパン幅をautoにし、float:rightを指定しました。
  2. スパンからposition:absolute;top:0;right:0プロパティを削除しました。ブラウザの互換性の問題が発生する場合は追加してください

あなたもできる

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

見栄えを良くするために！

リクエストに応じた新しいFiddleです。これ以上変更する必要がある場合は教えてください。

于 2012-12-31T02:57:39.903 に答える
0

または、ホバーするたびに動的htmlタグ生成を使用できます

于 2012-12-17T16:53:55.920 に答える
0

<img>最初のステップは、画像をまっすぐなタグではなく背景画像にすることです。これにより、子ノードを追加できます。

そのような子ノードを 1 つ追加します: 編集リンクです。必要な場所に表示させます。「ホバリング時のみ」の部分は今のところ無視してください。

準備ができたら、 を追加しdisplay:noneます。次に、コンテナ:hoverのスタイル(つまり) に を追加します。終わり。#container:hover>#editlinkdisplay:block

于 2012-12-17T16:46:38.053 に答える