人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

はてなブログ、記事本文中のリンクをhoverした時、画像がポップアップするようにしたいです。
http://magic.wizards.com/ja/articles/archive/daily-deck/20150814
↑のサイトのような感じです。

下記のように書いたのですが、

[html]
こんにちは、かわいい<a href="#" class="popup"><span><img src="/inu.jpg" alt="犬">犬<span></a>ですね。

[css]
a.popup span {
position: relative;
}
a.popup span img {
display: block;
width: 0;
height: 0;
z-index: 0;
}
a.popup:hover span img {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 400px;
z-index: 1;
}

imgがblockのためか、<a>の前後が改行されてしまいます。
inlineにすると、imgの幅が<a>と同じ幅になってしまいます。
なにかよい書き方はありますでしょうか?

●質問者: 匿名質問者
●カテゴリ:インターネット ウェブ制作
○ 状態 :キャンセル
└ 回答数 : 0/0件

回答がありません
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ