匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

はてなブログ、記事本文中のリンクを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>と同じ幅になってしまいます。
なにかよい書き方はありますでしょうか?

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/08/17 11:43:43
  • 終了:2015/08/24 11:45:05

回答(0件)

回答はまだありません

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません