十字架ラビアンローズ

リンクにカーソルを合わせた時に、その解説等を吹き出しでポップアップさせるのを、CSSだけで表現する方法を、サンプルとともに解説します。

  1. トップページ
  2. Webサイト構築
  3. CSS
  4. リンクにカーソルオーバーで、テキストを吹き出しでポップアップさせる方法

リンクにカーソルオーバーで、テキストを吹き出しでポップアップさせる方法

2016.12.7.Wed. 15:47

当サイトのページの左上にあるサイトロゴにカーソルを合わせると、「トップページへ」という吹き出しがポップアップ表示されます。
以下、そのようなリンクのサンプルになります(クリックしてもページ遷移等はしません)。

テスト

実はこれ、CSSだけで表現しています。
そのやり方を、少しずつ順を追うように紹介・解説します。


ポップアップさせるテキストは、CSS擬似要素の:before:afterを使用し指定します。
:before:after、どちらを使用しても構いません。


<a href="#"><img src="xxx.gif" width="100" height="100" alt="テスト"></a>

a:hover:after
{
content:"サンプル";
}

テスト

まずは本当に、リンクの後ろにテキストを表示させるというだけのものから。
因みにテキスト内容は、直接文言を指定する以外にも、以下のような手法で表現する事も出来ます。
attr()の ( ) 内に、HTMLでの属性の名前を指定する事で、その属性の内容が表示されるようになります。


<a href="#" title="ダミー"><img src="xxx.gif" width="100" height="100" alt="テスト"></a>

a:hover:after
{
content:attr(title);
}

これに様々なデコレーション等を施していく事で、吹き出しを表現していきます。


a:hover:after
{
display:inline-block;
padding:3px 8px;
color:#ffffff;
background-color:#cc3366;
border-radius:10px;
}

テスト

テキストに、パディング・文字色・背景色・角丸を施しました。
パディングを適用させる為に、display:inline-block;の指定もお忘れなく。

これに、:before:afterのうちの使用しなかった方で、三角形を作成し配置します。
三角形の作成のしかたについては、リボンのようなおしゃれなデザインの見出しを、CSSのみで表現する方法を参照して下さい。


a:hover:before
{
border-width:5px;
border-style:solid;
border-color:#cc3366 transparent transparent #cc3366;
width:0;
height:0;
content:"";
}

テスト

まあこうなりますよねw
こうして作成した吹き出しと三角形を、リンクに対して絶対配置します。
親要素にposition:relative;を適用させるのもお忘れなく。


a:hover:before
{
position:absolute;
top:20px;
left:80px;
z-index:10;
}

a:hover:after
{
position:absolute;
top:5px;
left:60px;
z-index:20;
}

テスト

これにてめでたく、CSSだけで、テキストを吹き出しでポップアップさせる事が出来ました。
あとはカーソルオーバーで画像を半透明にしたり、吹き出しの背景を画像にしたり、お好みでそれらしい装飾を施してみるのも良いでしょう。


因みに余談ですが、:before:afterを用いれば、リンクにカーソルオーバーで、ひと昔前に出会いたかったこんな事も出来るという訳です。
(※間接的な指定については割愛)


a:hover:before
{
content:url("xxx.gif");
}

a:hover:after
{
content:url("yyy.gif");
}

本当これ、ひと昔前だったらめっちゃやりたかったやつやw
発想と技術とで、時代が一致しなかったのだ…(嗚呼)。

画像お借りしました

Twitter

アーカイブ

全記事アーカイブ

ブログパーツ

  • アイラブ地元ブログパーツ