0

ブログの画像の上にズーム アイコンを配置する必要があります。

単純な画像の場合は簡単です (jQuery を使用して <span> 要素を追加しています):

<a href="..." rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"/> <img src="img.jpg" /> </a>

ただし、一部の画像には「float:left」または「float:right」の配置があります。float 画像の上に <span> を配置するにはどうすればよいですか?

例: http://jsfiddle.net/4Nvbe/1/

4

3 に答える 3

0

問題は HTML 構造にあるようですが、スパンを使用している特定の理由はありますか? div はうまくやっているようです。

ここに動作するデモがありますhttp://jsfiddle.net/4Nvbe/しかし、代わりに div を追加するように変更しようとすると、マークアップは次のようになります。

<a href="..." rel="lightbox"><div style="position:absolute; background-image: url(zoom.png);"/><img src="img.jpg" /></a>

それはあなたの問題を解決するかもしれません。

私の例では、クラスも使用しました。そのため、スタイリング/ビジュアル コントロールは、JS にブリードインするのではなく、スタイルシートに残されます。

于 2012-11-06T10:08:41.850 に答える
0

私は同様の問題を抱えており、Pete Uh が提案した<div>代わりにa を使用しました<span>が、うまくいきました。

于 2013-02-21T22:47:46.730 に答える
0

これが可能な解決策ですが、残りのスタイルに大きく依存します。

position: relative を配置し、フロートをアンカーに移動しました (コードの残りの部分では、これを行うことができない場合があります。実際の動作を確認するには、フィドルを参照してください。

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    img {width:30px;height:30px;border:1px solid red;display:block;margin:3px;}
    span {width:20px;height:20px;border:1px solid blue;display:block;margin:3px;}
    a { border:2px dotted green;display:inline-block;position:relative; }
</style>
</head>
<body>
<div> 
<a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img src="img.jpg" /> </a>
   <a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img src="img.jpg" /> </a><br style="clear:both" />
<a href="#" rel="lightbox"> <span style="position:absolute; background-image: url(zoom.png);"></span><img style="float:right;"  src="img.jpg" /> </a>
</div>
</body>
</html>
于 2012-11-06T10:09:49.037 に答える